Создание вкладок и отображение / скрытие содержимого в виде вкладок в jQuery - PullRequest
Новая
       7

Создание вкладок и отображение / скрытие содержимого в виде вкладок в jQuery

0 голосов
/ 29 августа 2011

Так что вкладка может не подходить для моего сценария, но здесь есть ситуация (и я не хочу использовать библиотеку jQuery-UI тоже). Я думаю, что это можно сделать проще.

Nav разметка в шапке: 

<ul>
  <li><a class="active" href="#" title="">Uno</a></li>
  <li><a href="#" title="">Dos</a></li>
  <li><a href="#" title="">Tres</a></li>
  <li><a href="#" title="">Cuatro</a></li>
</ul>

Основная разметка для содержимого (они не содержатся в том же самом div, и не могут быть): 

  <div class="block">
    <p>Lorem ipsum</p>
  </div>
  <div class="block">
    <p>Lorem ipsum</p>
  </div>
  <div class="block">
    <p>Lorem ipsum</p>
  </div>
  <div class="block">
    <p>Lorem ipsum</p>
  </div>

Я пытаюсь сделать две вещи. 1.) Скрыть все, кроме первого блока контента (который соответствует первому элементу списка, следовательно, .active, при загрузке. 2.) При щелчке любого из элементов списка он скрывает все остальные блоки контента и показывает соответствующие один, при добавлении класса .active к нему в nav.

Был бы очень признателен за помощь.

1 Ответ

1 голос
/ 29 августа 2011

Навигационные ссылки .... 

<div class="sidebar left">
                <ul id="navigation">
                    <li class="active" ><a href="#"  >Basic Information</a></li>
                    <li class="inactive"><a href="#" >Profile Picture</a></li>
                    <li class="inactive"><a href="#" >Education And Work</a></li>
                    <li class="inactive"><a href="#" >Social Contact</a></li>
                    <li class="inactive"><a href="#" >Security</a></li>
                </ul>
     </div>

Код для ваших разделов .... 

<div class="sec">
Section1
</div>
<div class="sec">
Section2
</div>
<div class="sec">
Section3
</div>
<div class="sec">
Section4
</div>

ваш код jquery для вышеупомянутого html может быть таким ... 

 <script type='text/javascript'>
        $(document).ready(function() {      

        $('ul#navigation li').click(function(){
            var number = $(this).index();
            $('.sec').hide().eq(number).show();
            $(this).toggleClass('active inactive');
            $('ul#navigation li').not(this).removeClass('active').addClass('inactive');
        });

        $('.sec').not(':first').hide();

        });
    </script>

попробуйте это ... это сработает ... дайте мне знать ...

...