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

标签和隐藏的内容

2 个答案: