стиль вкладки с javascript

Question

Я создал интерфейс стиля вкладки, используя css и javascript, только с двумя вкладками, которые работают отлично. Но я хочу добавить в него дополнительные вкладки, и я не понимаю, как я могу написать код javascript для него показать текущую активную вкладку и ее содержимое и скрыть все остальные вкладки и их содержимое

---

Ниже приведен мой HTML-код:

<div id="container"> 

    <div id="tabbox"> 
     <a href="#" id="signup" class="tab signup">Signup</a> 
     <a href="#" id="login" class="tab select">Login</a&gt; 
    </div> 

    <div id="panel"> 
     <div id="loginbox">Login Form</div> 
     <div id="signupbox"&gt;Signup Form</div> 
    </div> 

</div> 

---

Это я моя Javascript код:

$(document).ready(function() 
{ 

    $(".tab").click(function() 
    { 
     var X=$(this).attr('id'); 

     if(X=='signup') 
     { 
      $("#login").removeClass('select'); 
      $("#signup").addClass('select'); 
      $("#loginbox").slideUp(); 
      $("#signupbox").slideDown(); 
     } 
     else 
     { 
      $("#signup").removeClass('select'); 
      $("#login").addClass('select'); 
      $("#signupbox").slideUp(); 
      $("#loginbox").slideDown(); 
     } 

    }); 

}); 

Это работает отлично для двух вкладок, но если я добавить дополнительные вкладки к нему сказать:

<div id="container"> 

     <div id="tabbox"> 
      <a href="#" id="signup" class="tab signup">Signup</a> 
      <a href="#" id="login" class="tab select">Login</a&gt; 
      <a href="#" id="basic" class="tab basicinfo">Basicinfo</a> 
      <a href="#" id="contact" class="tab contact info">contactinfo</a> 
     </div> 

     <div id="panel"> 
      <div id="loginbox">Login Form</div> 
      <div id="signupbox"&gt;Signup Form</div> 
      <div id="basicbox">Basic information</div> 
      <div id="contactbox">Contact information</div> 
     </div> 

</div> 

Тогда, если я использую предыдущий Javascript функция мне придется добавить много больше строк, и я не понимаю, как я могу сделать это коротким и простым способом. Каких изменений я должен сделать в моем яваскрипте функции ..

Answer 1

Вы смешиваете id s (которые должны быть уникальными - вы используете их несколько раз) и classes странным образом (вы сделали это до своего редактирования ...).

Для базовой установки, как:

<div id="container"> 

     <div id="tabbox"> 
      <a href="#A" class="tab">A</a> <!-- note the URL fragments pointing to actual ids --> 
      <a href="#B" class="tab">B</a> 
      <a href="#C" class="tab">C</a> 
      <a href="#D" class="tab">D</a> 
     </div> 

     <div id="panel"> 
      <div id="A" class="tab">A Content</div> <!-- ID attributes are only used once --> 
      <div id="B" class="tab">B Content</div> 
      <div id="C" class="tab">C Content</div> 
      <div id="D" class="tab">D Content</div> 
     </div> 

</div>​​​​​​​​​​​​​​​​ 

Вы можете просто использовать несколько строк JQuery, чтобы все заработало:

$('div.tab').hide().first().slideDown(); //show first 

$('a.tab').click(function(){ 
    var targetID = $(this).attr('href'); //store element that triggered the click event 
    $('div.tab:visible').slideUp(function(){ //hide visible tab 
     $(targetID).slideDown(); //slide down newly selected tab 
    }); 
});​ 

См a working fiddle

Также читайте о ids и classes на MDN

Answer 2

Я хотел бы предложить следующее:

$(".tab").click(function() 
    { 
     var x = this.id, // equivalent to $(this).attr('id'), but slightly faster/more-simple 
      show = $('#' + x + 'box'); 
     if (show.length){ 
      $('.contentBox').slideUp(500); 
      show.slideDown(500); 
     } 

    });​ 

JS Fiddle demo.

Или следующее (эквивалент выше, но с использованием обратного вызова):

$(".tab").click(function() 
    { 
     var x = this.id, 
      show = $('#' + x + 'box'); 
     if (show.length){ 
      $('.contentBox') 
       .slideUp(500, 
         function(){ 
          show.slideDown(500); 
         }); 
     } 

    });​ 

JS Fiddle demo.

Это предполагает следующее:

1. Это все из «коробки», которые вы хотите показать, есть класс contentBox,
2. То, что идентификатор «окна» Вы хотите, чтобы показать, имеет вид из id ссылки, на которую нажимают, а затем слово «поле», поэтому нажатие на ссылку #signup показывает #signupbox.

---

Отредактировано включить CSS-единственный вариант:

Со следующим HTML:

<div id="container"> 

    <div id="tabbox"> 
     <a href="#signupbox" id="signup" class="tab signup">Signup</a> <!-- note the href --> 
     <a href="#loginbox" id="login" class="tab select">Login</a> 
    </div> 

    <div id="panel"> 
     <div id="loginbox" class="contentBox">Login Form</div> 
     <div id="signupbox" class="contentBox">Signup Form</div> 
    </div> 

</div>​ 

И КСС:

.contentBox { 
    height: 0; 
    -webkit-transition: height 1s linear; 
    -moz-transition: height 1s linear; 
    -o-transition: height 1s linear; 
    -ms-transition: height 1s linear; 
    transition: height 1s linear; 
    overflow: hidden; 
} 

.contentBox:target { 
    height: 2em; 
    -webkit-transition: height 1s linear; 
    -moz-transition: height 1s linear; 
    -o-transition: height 1s linear; 
    -ms-transition: height 1s linear; 
    transition: height 1s linear; 
}​ 

JS Fiddle demo.

Answer 3

Если вы предоставите класс для разделов контента, прежде чем открывать одну вкладку, вы можете закрыть все остальные, например.

$(".tab-content").slideUp(); 
$("#loginbox").slideDown(); 

Вам также необходимо знать, на какую вкладку вы нажали, например.

$(".tab").click(function(){ 
    var id = this.id; 
    var current_tab_content = '#'+id+'box'; 

    $(".tab-content").slideUp(); 
    $(current_tab_content).slideDown(); 

    }); 

Я не проверял это, но надеюсь, что у вас есть идея.

Answer 4

Не тестировался, но, возможно, работает:

Javascript:

$(document).ready(function(event) { 

    $("#tabbox a:not(.selected)").click(function() { 
     $($("#tabbox a.selected").attr('href')).slideUp(); 
     $("#tabbox a.selected").removeClass('select'); 
     $(this).addClass('select'); 
     $($(this).attr('href')).slideDown(); 
     event.stopPropagation(); 
    }); 

}); 

HTML:

<div id="container"> 

    <div id="tabbox"> 
     <a href="#signupbox" id="signup" class="tab signup">Signup</a> 
     <a href="#loginbox" id="login" class="tab select">Login</a> 
    </div> 

    <div id="panel"> 
     <div id="loginbox">Login Form</div> 
     <div id="signupbox">Signup Form</div> 
    </div> 

</div>