添加新选项卡时，Jquery选项卡未正确更新CSS

Question

我正在尝试创建一个新选项卡，允许您在选项卡中查看内容并在选项卡之间进行选择。目前，当我添加新选项卡时，它不允许我在选项卡之间切换并打破其他选项卡。我发现这是因为CSS没有刷新并加载到新的tab div中。我需要做些什么来确保新div具有Tab的css。

function addGroup() {
tabcount++;
document.getElementById('tab').innerHTML += '<li><a href="#tabs-'+tabcount+'">Aenean lacinia</a></li>';
document.getElementById('tab-content').innerHTML += '<div id="tabs-'+tabcount+'"><h2>Content heading 3</h2><p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p></div>';

我正在使用Jquery 1.11并尝试查看他们的文档，但没有注意到如何添加标签的文档。

Answer 1

您在此处为不同的标签提供了不同的ID

id="tabs-'+tabcount+'"

所以我想你会有像tabs-0 tabs-1这样的标签。您应用于tabs-0的格式不适用于tabs-1。

您可以向div添加类，然后使用css选择器

定位这些类

<div id="tabs-'+tabcount+'" class="tabs">

与

.tabs {
    //css code
}

或者为您使用的每个ID添加css

#tabs-1, #tabs-2 {
    //css code
}