不能使jQuery的顯示選項卡式瀏覽內容

Question

我試圖用buttoms而不是UL &製作標籤導航李

我碰到了jQuery代碼中的問題顯示出對應於部分點擊標籤。

我的HTML看起來像這樣：

<div class="container"> 
    <button class="tab-1">Copenhagen</button> 
    <button class="tab-2">London</button> 
    <button class="tab-3">New York</button> 
</div> 

<div id="content"> 

    <div class="tab-1"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
    </div> 
    <div class="tab-1"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
    </div> 
    <div class="tab-1"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
    </div>  
</div> 

我的jQuery看起來是這樣的：

$(document).ready(function() { 

    $(function(){ 
     $('.container button:first').addClass('active'); 
     $('#content div').hide(); 
     $('#content div:first').show(); 

     $('.container button').on('click',function(){ 
      $('.container button').removeClass('active'); 
      $(this).addClass('active') 

      $('#content div').hide(); 
      var activeTab = $(this).attr('class'); 
      alert(activeTab); 

      $(activeTab).show(); 
      return false; 
     }); 
    }) 

}); 

以上返回行不顯示對應於點擊選項卡中的DIV部分。

我已經使用類作爲標籤和部分之間的導航句柄來顯示，但我不知道是否有更好的方法來做到這一點。

請幫忙或建議一個更好的方法來處理節目。

問候 弗萊明

Answer 1

所有內容的div具有相同的類。

$('.container button:first').addClass('active'); 
 
$('#content div').hide(); 
 
$('#content div:first').show(); 
 

 
$('.container button').on('click', function (e) { 
 
    $('.container button').removeClass('active'); 
 
    var activeTab = $(this).attr('class'); 
 
    $(this).addClass('active') 
 
    $('#content div').hide(); 
 
    $('#content div.' + activeTab).show(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div class="container"> 
 
    <button class="tab-1">Copenhagen</button> 
 
    <button class="tab-2">London</button> 
 
    <button class="tab-3">New York</button> 
 
</div> 
 

 
<div id="content"> 
 

 
    <div class="tab-1"> 
 
     <p>1 Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
 
    </div> 
 
    <div class="tab-2"> 
 
     <p>2 Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
 
    </div> 
 
    <div class="tab-3"> 
 
     <p>3 Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
 
    </div> 
 
</div>