標籤和隱藏的內容

Question

我試過了一切，研究過，但我真的不知道CSS很好。我試圖讓標題保持相同的寬度，然後有一個轉換下拉，它有一個描述，但擴展比標題部分更寬。類似於下面的示例，但是在懸停而不是點擊時顯示和隱藏內容。

的例子HTML：

<div class="tabContainer" > 
    <ul class="digiTabs" id="sidebarTabs"> 
    <li id="1" class="selected t">Overview</li> 
    <li id="2" class="t">Itinerary</li> 
    <li id="3" class="t">Destination Info</li> 
    </ul> 
    <div id="t1" style="display:none;" class="tabContent">...</div>  
    <div id="t2" style="display:none;" class="tabContent">...</div> 
    <div id="t3" style="display:none;" class="tabContent">...</div> 
</div> 

的例子CSS：

.tabContainer {margin: 0;} 
.tabContainer .digiTabs { 
    list-style: none; 
    display: block; 
    overflow: hidden; 
    margin: 0; 
    padding: 0px; 
    position: relative; 
    top: 1px; 
} 
.tabContainer .digiTabs li { 
    float: left; 
    background-color: #e7e5df; 
    padding: 5px 15px!important; 
    cursor: pointer; 
    border-bottom:none; 
    margin-right: 1px; 
    color: #801350; 
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
    font-size: 14px; 
} 
.tabContainer .digiTabs .selected { 
    background-color: #fff; 
    color: #393939; 
    border-left: 1px solid #e1e1e1; 
    border-top: 1px solid #e1e1e1; 
    border-right: 1px solid #e1e1e1; 
} 
#tabContent { 
    padding: 10px; 
    background-color: #fff; 
    overflow: hidden; 
    float: left; 
    margin-bottom: 10px; 
    border: 1px solid #e1e1e1; 
} 

的例子JS：

$(function(){ 
    $(".t").bind("click",function(){ 
     $(".tabContent").each(function(){ 
      $(this).hide(); 
     }); 
     var id = $(this).attr("id"); 
     $("#t"+id).show(); 
    }); 
}); 

http://jsfiddle.net/NIkhar/NRkL9/2/

任何幫助，將不勝感激。

Answer 1

嘗試fiddle 你不需要使用的每個和我添加所選類處理程序

$(function(){ 

     $(".t").hover(function(){ 
      $(".tabContent").hide(); 
      $('.t').removeClass('selected'); 
      $(this).addClass('selected'); 
     var id = $(this).attr("id"); 
      $("#t"+id).show(); 
     }); 

}); 

Answer 2

只是更改此代碼：

$(function(){ 
    $(".t").bind("click",function(){ 
     $(".tabContent").each(function(){ 
      $(this).hide(); 
     }); 
     var id = $(this).attr("id"); 
     $("#t"+id).show(); 
    }); 
}); 

進入這個：

$(function(){ 
    $(".t").hover(function() { /* ONLY THIS LINE HAS CHANGED */ 
     $(".tabContent").each(function(){ 
      $(this).hide(); 
     }); 
     var id = $(this).attr("id"); 
     $("#t"+id).show(); 
    }); 
});