Почему не работает код jQuery?

Question

[Lord_Dantes]

У нас есть ссылки на которые мы нажимаем и получаем их айди и заносим в переменную.

$('.tab-nav a').click(function(){
    var $fast = $(this).attr('id');                 
  });

Также дальше при клике мы используем переменную и вставляем в обращение к элементу.

$('.tab-nav a').click(function(){
    var $fast = $(this).attr('id');         
    $(".tab-panels > div#"+ $fast + "").show();
});

Делал console.log(), и все работает, дивка с айди находится но функция .show() не применяется.
Мне нужно чтобы при клике на ссылку отображалась div-элемент с соответствующим id.

Спасибо за внимание
Песочница

Answer 1

[Ihor Bratukh]

ID это уникальный идентификатор, а у Вас их по 2 штуки:

<a href="javascript:void(0);" id="1"></a>
<div id="1">Info 1 </div>

Используйте data-* атрибуты

Comments

[Lord_Dantes]

Действительно, я попробовал через атрибуты и все получилось. Спасибо, большое))

[Ihor Bratukh]

Slave, Да и ID в табах тоже незачем плодить, используйте там тоже data-* атрибуты:
<div data-tab="1">Info 1 </div>

$(".tab-panels > div[data-tab="+ $fast +"]").show();

[Lord_Dantes]

BRAGA96, Спасибо)

Answer 2

[Владимир Проскурин]

В HTML есть тоже правило именования id. У вас id это тупо число, такого не может быть. Добавьте префикс к id.
Пример https://codepen.io/anon/pen/pqreVY?editors=1010
Хоть jQuery и понимает одинаковые id на странице, но лучше все таки соблюдать стандарты, и делать id уникальным на странице. https://codepen.io/anon/pen/PXKpaQ?editors=1010

Comments

[Lord_Dantes]

Вы уже несколько раз спасаете меня, благодарю))

Answer 3

[Evgeny Svirsky]

Вы уверены что дивка лежит именно в дочерних элементах .tab-panels?
Ищите напрямую по #$fast, зачем уточнять .tab-panels > div?
ID на странице должны быть уникальными, поэтому не нужно лишних селекторов.
По поводу чего не применяется - может и применяется, просто не видете. show - если я не ошибаюсь делает display: block, посмотрите в стили элемента, может из-за косяка в верстке он не отображается, а по факту уже display: block.

Comments

[Lord_Dantes]

Стили элемента не были заданы изначало. Все делалось заранее благодарю за помощь.