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

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

Разметка навигации в шапке:

<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.) При щелчке любого из элементов списка он скрывает все остальные блоки контента и показывает соответствующие one, добавляя к нему класс .active в nav.

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


javascript jquery tabs show-hide
person Fuego DeBassi    schedule 29.08.2011    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

<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>

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

person teacher    schedule 29.08.2011