Показать дивы на клике

0

Я должен показать соответствующую функцию щелчка. Также как вкладки accordion/Content в jquery.

В настоящее время я написал jquery для добавления и удаления класса.

Мне нужно показать соответствующие divs при нажатии на вкладки.

Вот мой код

$('li').on('click',function(){
      $('li a').removeClass('inactive');
      $(this).children('a').addClass('inactive');
    });

DEMO

PS - Я не хочу давать эффект переключения в меню вкладок. И никаких плагинов, пожалуйста.

  • 2
    И что именно ваш вопрос?
  • 0
    Упс забыл написать вопрос .. Отредактировал мой вопрос.
Теги:

2 ответа

1
Лучший ответ

Вы можете использовать .data() чтобы сохранить, какой div будет отображаться при нажатии на привязку.

HTML

<ul>
  <li class="table-view"><a href="#" class="inactive" data-div-class="div1">Div 1</a></li>
  <li class="chart-view"><a href="#" data-div-class="div2">Div 2</a></li>
</ul>  

<div class="myDiv div1">Show this by default and remove when clicked on the div 2 tab</div>
<div class="myDiv div2">Show this when Div 2 tab is clicked</div>

JavaScript

$('li').on('click',function(){
    $('li a').removeClass('inactive');

    var $anchor = $(this).children('a');
    $anchor.addClass('inactive');

    //Hide All Divs
    $('.myDiv').hide();

    //Show Div associated with $anchor
    $("." + $anchor.data('div-class')).show();     
});

DEMO

Поделиться
  • 0
    Но по умолчанию мне нужно только первый div для отображения.
  • 0
    @ Совмя, посмотри демо. Вы можете скрыть их, используя простые CSS.
Показать ещё 5 комментариев
0

Попробуй это:-

('li').on('click',function(){
  $('li a').removeClass('inactive');
  $('li a').show(); 
  $(this).children('a').addClass('inactive');
  $(this).children('a').hide();
});
Поделиться

Ещё вопросы

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