css - 选项卡和隐藏内容

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

});