CSS:
.exp_block-2-- {
display: none;
}
.exp_block-2--active {
display: flex;
flex-direction: column;
}
HTML. Список элементов на которые происходят нажатие
<div class="exp_block-2_btns">
<div class="exp_block-2_btns_imgs exp_block-2_btns_imgs--img1" user-data="1"></div>
<div class="exp_block-2_btns_imgs exp_block-2_btns_imgs--img2" user-data="2"></div>
<div class="exp_block-2_btns_imgs exp_block-2_btns_imgs--img3" user-data="3"></div>
<div class="exp_block-2_btns_imgs exp_block-2_btns_imgs--img4" user-data="4"></div>
<div class="exp_block-2_btns_imgs exp_block-2_btns_imgs--img5" user-data="5"></div>
<div class="exp_block-2_btns_imgs exp_block-2_btns_imgs--img6" user-data="6"</div>
<div class="exp_block-2_btns_imgs exp_block-2_btns_imgs--img7" user-data="7"></div>
</div>
HTML. Список контейнеров которые нужно отображать:
<div class="exp_block-2-- exp_block-2--active" user-data="1">
<div class="exp_block-2_capt">
Hadoop и MapReduce
</div>
<div class="exp_block-2_desc">
Инструмент и фреймворк для вычисления распределённых задач с использованием большого количества компьютеров («ноды») в кластере.
</div>
</div>
<div class="exp_block-2--" user-data="2">
<div class="exp_block-2_capt">
NoSQL, MongoDB
</div>
<div class="exp_block-2_desc">
Нереляционные базы данных для работы с Big Data на примере MongoDB.
</div>
</div>
<div class="exp_block-2--" user-data="3">
<div class="exp_block-2_capt">
Apache Spark
</div>
<div class="exp_block-2_desc">
Фреймворк с открытым исходным кодом для реализации распределённой обработки неструктурированных и слабоструктурированных данных.
</div>
</div>
<div class="exp_block-2--" user-data="4">
<div class="exp_block-2_capt">
Google Colab
</div>
<div class="exp_block-2_desc">
Сервис, который позволяет запускать библиотеки Python «в облаке».
</div>
</div>
<div class="exp_block-2--" user-data="5">
<div class="exp_block-2_capt">
PySpark
</div>
<div class="exp_block-2_desc">
Пакет распределённого управления данными и машинным обучением в Apache Spark.
</div>
</div>
<div class="exp_block-2--" user-data="6">
<div class="exp_block-2_capt">
Pandas
</div>
<div class="exp_block-2_desc">
Продвинутая и быстроразвивающаяся библиотека для обработки и анализа данных в Python.
</div>
</div>
<div class="exp_block-2--" user-data="7">
<div class="exp_block-2_capt">
Excel
</div>
<div class="exp_block-2_desc">
Программа для работы с электронными таблицами.
</div>
</div>
Вот код jquery на обработку но он не работает, что не так?:
$('.exp_block-2_btns_imgs').onClick((this) => {
let n = $(this).attr('user-data');
$('.exp_block-2--').hide();
$('.exp_block-2--[user-data="'+ n +'"]').show();
});
