jQuery 使用选项卡本身内部的制表符创建选项卡

Question

我正在尝试使用以下代码在 jQuery 中创建自己的选项卡:

/* tabs */
var tabItems    = "";
var tabList     = "";
$(".Tabs .tab").each (
    function( intIndex ) {
            // get tabTitle to create tabNav list
            $(this).attr("id", "panel_"+intIndex);
            tabItems += "<li id='tab_"+intIndex+"'>" + $(".tabTitle", this).html() + "</li>";
        }
);
tabList = "<ul class='tabNav'>"+tabItems+"</ul>"; 
$(".Tabs").prepend(tabList);

$(".Tabs .tab").each (
    function( intIndex ) {
        $("#tab_"+intIndex).bind("click", function() {
                $(".Tabs .tab").length;
                for (i=0;i<=$(".Tabs .tab").length;i++) {
                        $("#panel_"+i).hide();
                    }                               
                $("#panel_"+intIndex).show();
        })
    }
);

我不是 jQuery goeroe，所以请保持温和。

此代码工作的 html 代码是:

<div class="Tabs">
    <div class="tab">
        <div class="tabTitle">tabtitle1</div>
        tabcontent1
    </div>
    <div class="tab">
        <div class="tabTitle">tabtitle2</div>
        tabcontent2
    </div>
</div>

CSS(剥离)

.Tabs {
    position: absolute;
    z-index:999;    
}
.Tabs .tab {
    position: absolute;
    display:none;
    z-index:999;    
    top: 35px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    background: white;
}
.Tabs .tab .tabTitle {
    display:none;
    color:white;
} 
/* Generated clickable tabs */
.Tabs ul.tabNav {
    margin: 0 5px;
}

.Tabs ul.tabNav li {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline;
    color: #e2e2e2;
    background: none;
}

.Tabs ul.tabNav li a {
    padding: 3px 10px;
    margin-left: 2px;
    border-bottom: none;
    text-decoration: none;
    color: #e2e2e2;
}

.Tabs ul.tabNav li a:link {
    color: #e2e2e2;
}
.Tabs ul.tabNav li a:visited {
    color: #e2e2e2;
}

.Tabs ul.tabNav li a:hover {
    color: #e2e2e2;
    background: #989898;
    background-image: none;
}

.Tabs ul.tabNav li.tabActive a {
    background-color: white;
    border-bottom: 1px solid #fff;
    color: black;
}

.Tabs ul.tabNav li.tabActive a:hover {
    color: #000;
    background: white;
    border-bottom: 1px solid white;
}

我绝对希望将标题保留在原处，而不是在无序列表中分开。

到目前为止一切顺利，我让他们工作了。问题(除了困惑的代码之外)是生成的标签标题的 CSS 不起作用。我想我不能使用 live 或 delegate 来做到这一点。

有人提供解决方案或不同的方法吗？

Answer 1

好的，这就是我想出的。看起来您正在使用 anchor 来设置选项卡的样式。这很奇怪，因为如果您单击它会重定向，但您的内容显示在同一页面上。所以，我将 href 设置为 # 来阻止它。在这里，我为您的标题添加了 anchor 标签，并为您单击的选项卡添加了类。查看 fiddle :

http://jsfiddle.net/gUXyQ/7/

我的第二个解决方案是完全放弃 anchor ，并删除这个 css，因为它什么都不做。事实上，它一开始并没有做任何事情，因为它将它设置为与之前相同的颜色。

.Tabs ul.tabNav li a:link {
    color: #e2e2e2;
}
.Tabs ul.tabNav li a:visited {
    color: #e2e2e2;
}

http://jsfiddle.net/EdbhV/1/

您的 anchor 可能有其他依赖项，但这是我要使用的。 使用最适合您需要的那个。 如果您需要更多帮助，请告诉我们。