Показать / Скрыть DIV на основе конкретной ссылки нажмите [дублировать]

0

У меня есть страница с списком контента. Затем у меня есть фильтры, чтобы кто-то мог сузить их поиск. Я хотел бы показать/скрыть блок информации на боковой панели в соответствии с фильтром, который кто-то нажал. В основном щелчок по фильтру покажет/спрячет эти DIV.

Вот два фильтра. Обратите внимание, что тот, который выбран в данный момент, имеет добавленный класс "active" в двух местах.

<div class="container"> 
   <ul class="filters">
     <li class="first active>
       <a class="filterbutton active" href="#filter">Category 1</a>
    </li>
    <li class="last">
       <a class="filterbutton" href="#filter">Category 2</a>
    </li>
  </ul> 
</div>

Когда страница загружается, категория 1 активна по умолчанию, поэтому я покажу свой соответствующий DIV-блок-1 по умолчанию.

Вот где должно быть волшебство: когда щелчок по ссылке фильтра выше, я хотел бы показать/скрыть два DIV, которые я загрузил.

<div id="block-1">content</div>    <—— Hide this one.

<div id="block-2">content</div> <—— Display this one.

Также важно, чтобы пользователь нажимал на первую категорию, чтобы вернуться к представлению по умолчанию, показывая только первый блок.

ОБНОВЛЕНИЕ: Это заняло много времени, но я, наконец, понял это. Используя "дубликат" ответа, я приспособил его к моим потребностям. Я также использовал другой код для добавления необходимых атрибутов "rel", которые мне нужны.

  • 1
    Где яваскрипт, который вы пробовали? Вы искали? Как насчет этого ответа
  • 0
    К сожалению, я не знаю javascript, поэтому я во власти тех, кто знает. Спасибо за ссылку. Я смотрел, но я думаю, что пропустил тот. Благодарю.
Показать ещё 3 комментария
Теги:

3 ответа

0

Вы можете сделать это с помощью функции переключения: http://jsfiddle.net/AU8fX/1/

$( ".filterbutton" ).on( "click", function() {
    $('.block').toggle();
});
Поделиться
  • 0
    Спасибо за предложение, но проблема с Toggle заключается в том, что пользователь может снова щелкнуть ссылку, и она будет удалена. Я бы хотел, чтобы он был удален только при нажатии на другую ссылку.
0

Это, безусловно, возможно с помощью простых js и CSS, однако препятствие будет заключаться в том, что он не выглядит раздражающим. Я бы рекомендовал использовать изотоп jQuery. http://isotope.metafizzy.co. Это не только для макетов, но и для фильтрации. Если вам вообще не нужна его для макета, вы также можете использовать https://mixitup.kunkalabs.com

Поделиться
  • 0
    Я попробовал изотоп, но он просто не работал с сайтом, который у нас есть. Так что я надеялся, что JQuery может сделать некоторое появление / исчезновение.
  • 0
    это может, но эффект немного дрянной. Это базовая демонстрация процесса. codepen.io/the_ruther4d/pen/cd90a8b4470360d397bfa433a51883e1
0

Вы говорите, что ваш JS не так хорош, давайте посмотрим, смогу ли я дать вам достаточно подсказок:

<a class="filterbutton active" data-target="#example" href="#filter">Category 1</a>

HTML5 имеет атрибуты группы данных. Я написал цель, но вы можете поместить все, что угодно, это может быть для вашего просто кода.

Вы можете получить это при нажатии:

$('.filterbutton').on('click', function(){
    // do something with the click
    alert( $(this).data('target') ); // I alert it, you van use this as a selector
}):

Вы можете легко переключать активный класс с помощью некоторого кода в onclick:

$('.active').removeClass('active');
$(this).addClass('active');

Чтобы показать и скрыть элементы:

$('.SomeElements').hide();
$( specific selector).show();
Поделиться
  • 0
    Кстати, он использует библиотеку jQuery в своем ответе - jquery.com
  • 0
    Я не совсем уверен, что вы имеете в виду с этим комментарием, мой код jQuery не так ли? Или вы имеете в виду js в первом предложении? JQuery это JavaScript, а также ..
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню