jQuery创建选项卡时，选项卡标题位于选项卡本身内部

我正尝试使用以下代码在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();
        })
    }
);

我绝对希望把标题放在它们所在的位置，而不是在一个无序的列表中分开

到目前为止还不错，我让他们工作了。问题（除了凌乱的代码之外）在于生成的标签标题的CSS不起作用。我想我不能用live或delegate来做这件事

---

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

好的，这就是我想到的。看起来您正在使用锚定来设置选项卡的样式。这很奇怪，因为如果您单击，它将重定向，但您的内容显示在同一页面上。因此，我已将href设置为#以停止此操作。在这里，我为你的标题添加了锚定标签，并为你点击的标签添加了类。看看小提琴：

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

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

您可能对锚点有其他依赖项，但这是我要使用的。 使用最适合你需要的。

---

如果您还需要帮助，请告诉我们。

舒尔，我已经清理了一点。

.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;
}

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