Как создать панель навигации JQuery?

Question

У меня есть сайт с 6 навигационными кнопками в стороне. Для каждого из них я хочу показать, что соответствующий DIV скрыть другой 5. Страница загружается с показателем DIV # 1, а остальные отображаются: none.

Я знаю, как скрыть и показать элементы с помощью hide(), show(), fade и т. Д., Но я пытаюсь придумать наилучший способ беспрепятственного отображения щелчка, одновременно скрывая то, что в данный момент видно, не прибегая к буквам их всех, как:

$('#btn1').click(function(){ 
$('#div2').hide(); 
$('#div3').hide(); 
$('#div1').show(); 
)} 

Answer 1

Здесь есть код JQuery:

 $(document).ready(function() { 
      $('#btn-next').click(function() { 
      $('#recent_post').hide(); 
      $('#top_post').fadeIn(3000).show(); 
      return false;   
      }); 
     $('#btn-prev').click(function() { 
     $('#top_post').hide(); 
     $('#recent_post').fadeIn(3000).show(); 
      return false; 
     }); 
     }); 

Вот HTML:

<div id="top_post" class="post" style="z-index:1;"> 
     <!---Content goes here---> 
    </div> 
    <div class="post" id="recent_post" style="display:none;z-index:0;"> 
     <!---Content goes here---> 
    </div> 

Я выполнил его в разделе моих website.Visit «статьи» в http://kaidul.web44.net/ я только что построил его для двух divs.Do в такая же работа для 6 divs.Hope это работает!

Answer 2

$('.commonBtn').click(function(){ // commonBtn is common class to all buttons 
    var index = this.id.replace('btn',''); 
    $('div[id^=div]:visible').hide(); 
    $('#div'+ index).show(); 
)}; 

Answer 3

Используйте кнопки ид как btn_1 вместо btn1

$('div[id^="btn"]').click(function(){ 
    var id = $(this).attr("id").split("_")[1]; // fetch the id's number part 

    $('div[id^="div"]').hide(); // hide all divs with id starting with div 

    $("#div"+id).show(); // show corresponding div  

)} 

Answer 4

Вот что я сделал. Если навигационные кнопки называются такими вещами, как «dc», то div, который скрывается и отображается, был назван «dcdiv»

var which_id; 

    $(document).ready(function() { 
     $("#rightcontent>div:not(.default)").hide(); // hide all client divs but default one 
     $("#clientnav li").click(onClick); // event handler for nav bar 

     function doTransition(){ 
      var which_name = which_id.split("#")[1]; 
      $('#clientnav li[id="'+which_name+'"]').addClass("active"); 
      $("#rightcontent>div:visible").slideUp("fast", function(){ 
       var which_div = which_id+'div'; 
       $(which_div).slideDown("fast"); 
      }); 
     } 

     function onClick(event){ 
      $('#clientnav li').removeClass("active"); // remove active class for all nav buttons 
      which_id = "#" + $(this).attr("id"); // get the id of the nav button clicked on 
      doTransition(); 
      event.preventDefault(); 
     };