Как сделать табы с помощью data и id

332

15 декабря 2017, 04:50

Всем привет. Помогите пожалуйста сделать табы. Мне надо чтобы по клику на .type-button, к котором я приписал data, скрывались блоки, id которых не совпадает с data-category .type-button. Я думаю что это можно сделать на Jquery, но не представляю себе логику.

$('.type-button').click(function() { 
  //  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<span data-category="All projects" class="type-button">All projects</span> 
<span data-category="Logotypes" class="type-button active">Logotypes</span> 
<span data-category="Mobile" class="type-button">Mobile</span> 
<span data-category="Polygraphy" class="type-button">Polygraphy</span> 
<span data-category="Webdesign" class="type-button">Webdesign</span> 
<!--Блоки, которые мне надо скрывать по клику на type-button:--> 
 
<div class="projects-list"> 
  <a class="project-banner" rel="bookmark" id="All projects"></a> 
  <a class="project-banner" rel="bookmark" id="Logotypes"></a> 
  <a class="project-banner" rel="bookmark" id="Mobile"></a> 
</div>

Answer 1

jQuery(document).ready(function($) { 
  $('.type-button').click(function() { 
    $('.project-banner') 
      .hide() 
      .filter('[id="' + $(this).data('category') + '"]') 
      .show(); 
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<span data-category="All projects" class="type-button">All projects</span> 
<span data-category="Logotypes" class="type-button active">Logotypes</span> 
<span data-category="Mobile" class="type-button">Mobile</span> 
<span data-category="Polygraphy" class="type-button">Polygraphy</span> 
<span data-category="Webdesign" class="type-button">Webdesign</span> 
 
<div class="projects-list"> 
  <a class="project-banner" rel="bookmark" id="All projects">All projects</a> 
  <a class="project-banner" rel="bookmark" id="Logotypes">Logotypes</a> 
  <a class="project-banner" rel="bookmark" id="Mobile">Mobile</a> 
</div>

Из-за особенностей парсера jQuery строка #All projects будет расценена как "найти элементы projects, которые являются дочерними к элементу с id=All. Поэтому в фильтре был использован селектор поиска по атрибуту

Еще есть вариант написания такого обработчика

$('.type-button').click(function() {
  $('.project-banner').hide();
  $(document.getElementById($(this).data('category')).show();
});

В этом случае элемент с указанным id будет искаться по всему документу, а не только среди коллекции с классом .project-banner. Учитывая, что стандарт требует, чтобы у элементов атрибут id был уникален, то для валидного HTML результат будет такой же. Но первый вариант все-таки лучше читается

Answer 2

Суть должна быть следующей - у вас в блоке и кнопке нужно иметь какие-то уникальные характеристики чтобы идентифицировать что эта кнопка соответствует именно этому блоку. Лучше всего для этого подойдут именно data-* атрибуты.

А уже схема скрытия и открывания их следующая: по умолчанию у вас все блоки скрыты, это прописывается им в стилях. Нужно еще обозначить некий класс, который вы будете добавлять блоку чтоб его показать. В итоге при нажатии на кнопку вы у текущего активного блока убираете этот класс, а у блока с таким же data-* атрибутом как и у кнопки которую вы нажали вы пропишите этот класс.

$(document).on('click', '.type-button', function(){ 
    let cat = $(this).data('category'); 
     
    $('.category.shown').removeClass('shown'); 
    $('.category[data-category="'+cat+'"]').addClass('shown'); 
});

.type-button{ 
    display: inline-block; 
    border:1px solid black; 
    background:lightgrey; 
    padding:5px 15px; 
    margin: 10px; 
} 
 
.category{ 
    display: none; 
    border:1px solid black; 
    background:white; 
    padding:60px; 
    margin: 10px; 
} 
.category.shown{ 
    display:block; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<span data-category="All projects" class="type-button">All projects</span> 
<span data-category="Logotypes" class="type-button active">Logotypes</span> 
<span data-category="Mobile" class="type-button">Mobile</span> 
<span data-category="Polygraphy" class="type-button">Polygraphy</span> 
<span data-category="Webdesign" class="type-button">Webdesign</span> 
 
 
<div class="category" data-category="All projects"> 
  All projects 
</div> 
<div class="category" data-category="Logotypes"> 
  Logotypes 
</div> 
<div class="category" data-category="Mobile"> 
  Mobile 
</div> 
<div class="category" data-category="Polygraphy"> 
  Polygraphy 
</div> 
<div class="category" data-category="Webdesign"> 
  Webdesign 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как достать строку из массива который является значением ключа объекта

266

javascript

Webpack. Два разных loaders'а для svg

Ситуация такая: для вставки svg изображений в код используется react-svg-loaderПоявилась задача использовать svg в стилях css, для этого необходимо обрабатывать...

237

javascript

Возникают предупреждения в связки postcss + cssnext + webpack

Использую postcss + cssnext + webpack и при использовании нативный css propertys в консоли возникает предупреждение -

265

PHP

Создание таймера на php

Пытаюсь в голове сложить механизм создания таймераЗадача: Пользователь создает таймер сроком на 3 дня 15 часов

217