Създаване на раздели и показване/скриване на съдържание в стил таб в jQuery

Така че раздел може да не е правилната дума за използване в моя сценарий, но ето каква е ситуацията (и аз не искам да използвам jQuery-UI библиотека също). Мисля, че може да се направи по-просто.

Навигационно маркиране в заглавката:

<ul>
  <li><a class="active" href="/bg#" title="">Uno</a></li>
  <li><a href="/bg#" title="">Dos</a></li>
  <li><a href="/bg#" title="">Tres</a></li>
  <li><a href="/bg#" 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.

Наистина бих оценил помощта.


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="/bg#"  >Basic Information</a></li>
                    <li class="inactive"><a href="/bg#" >Profile Picture</a></li>
                    <li class="inactive"><a href="/bg#" >Education And Work</a></li>
                    <li class="inactive"><a href="/bg#" >Social Contact</a></li>
                    <li class="inactive"><a href="/bg#" >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