标签和隐藏的内容

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(); 
    }); 
});