一页上有两组CSS选项卡？

Question

我想使用标签来替换我正在处理的网站的表格。问题是在一个标签集中会有太多信息（标签开始堆叠，看起来有点俗气）。所以我想我会将它们分解成多组标签。

我使用了这段代码：http://www.cssplay.co.uk/menu/cssplay-tabbed-pages.html

稍微修改了一下但我的问题是我不能让两组标签独立工作。第二个模仿用户点击第一组标签或根本不起作用。是否有可能做到这一点？或者我把代码搞砸了？我只是复制了相同的代码并将所有内容更改为唯一属性。你能帮忙吗？

这是CSS：

}
.hiddenTarget {
    display:none;
    position:fixed;
}
.tabbedPages {
    position:relative;
    margin:50px 0;
}
ul.tabs {
    padding:0;
    margin:0;
    list-style:none;
    float:left;
    position:relative;
    z-index:100;
}
ul.tabs li {
    float:left;
    margin-right:2px;
}
ul.tabs li a {
    display:block;
    font:normal 12px/30px arial, sans-serif;
    border:1px solid #aaa;
    border-radius:5px 5px 0 0;
    background:#69c;
    padding:0 20px;
    text-decoration:none;
    color:#fff;
    background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, rgba(255, 255,                      255, 0.7)), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.5, transparent), to(rgba(255, 255, 255, 0.3)));
background-image:-moz-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
background-image:-ms-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
background-image:-o-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
background-image:linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
}
.tabcontent {
    float:left;
    width:700px;
    padding:20px;
    border:1px solid #aaa;
    border-radius:0 5px 5px 5px;
    background:#fff;
    position:relative;
    z-index:10;
    display:none;
    clear:left;
    top:-1px;
    box-shadow:0 15px 10px -15px rgba(0,0,0,0.4);
}
.tabcontent p {
    padding:0 0 5px 0;
    margin:0;
    font:normal 12px/20px arial, sans-serif;
    color:#333;
}
.tabcontent h4 {
    padding:0 0 10px 0;
    margin:0;
    font:bold 14px/25px arial, sans-serif;
    color:#000;
}
.tabcontent img {
    border:1px solid #444;
    display:block;
    float:left;
    margin:0 20px 0 0;
    box-shadow:0 15px 10px -15px rgba(0,0,0,0.4);
}

/* change the tab to selected style */
ul.tabs li a.default, #tab1:target ~ .tabbedPages .tabs li a.default, #tab2:target ~         .tabbedPages .tabs li a.tab2, #tab3:target ~ .tabbedPages .tabs li a.tab3, #tab4:target ~  .tabbedPages .tabs li a.tab4, #tab5:target ~ .tabbedPages .tabs li a.tab5, #tab6:target ~ .tabbedPages .tabs li a.tab6, #tab7:target ~ .tabbedPages .tabs li a.tab7, #tab8:target ~ .tabbedPages .tabs li a.tab8, #tab9:target ~ .tabbedPages .tabs li a.tab9, #tab10:target ~ .tabbedPages .tabs li a.tab10 {
background-color:#fff;
border-bottom:1px solid #fff;
color:#000;
}

/* show the tab content */
div.default, #tab1:target ~ .tabbedPages div.default, #tab2:target ~ .tabbedPages         div#view2, #tab3:target ~ .tabbedPages div#view3, #tab4:target ~ .tabbedPages div#view4, #tab5:target ~ .tabbedPages div#view5, #tab6:target ~ .tabbedPages div#view6, #tab7:target     ~ .tabbedPages div#view7, #tab8:target ~ .tabbedPages div#view8, #tab8:target ~ .tabbedPages div#view9, #tab2:target ~ .tabbedPages div#view10 {
display:block;
}

/* reset the unclicked tabs to default */
#tab2:target ~ .tabbedPages .tabs li a.default, #tab3:target ~ .tabbedPages .tabs li         a.default, #tab4:target ~ .tabbedPages .tabs li a.default, #tab5:target ~ .tabbedPages .tabs li a.default, #tab6:target ~ .tabbedPages .tabs li a.default, #tab7:target ~ .tabbedPages .tabs li a.default, #tab8:target ~ .tabbedPages .tabs li a.default,, #tab9:target ~ .tabbedPages .tabs li a.default, #tab10:target ~ .tabbedPages .tabs li a.default {
background-color:#69c;
border:1px solid #888;
color:#fff;
}

/* hide the default tab when selecting other tabs*/
#tab2:target ~ .tabbedPages div.default, #tab3:target ~ .tabbedPages div.default,  #tab4:target ~ .tabbedPages div.default, #tab5:target ~ .tabbedPages div.default, #tab6:target ~ .tabbedPages div.default, #tab7:target ~ .tabbedPages  div.default,#tab8:target ~ .tabbedPages div.default, #tab9:target ~ .tabbedPages div.default, #tab10:target ~ .tabbedPages div.default {
display:none;
}
.clear {
    clear:left;
}

这是HTML：

<b id="tab1" class="hiddenTarget"></b>
<b id="tab2" class="hiddenTarget"></b>
<b id="tab3" class="hiddenTarget"></b>
<b id="tab4" class="hiddenTarget"></b>
<b id="tab5" class="hiddenTarget"></b>
<div class="tabbedPages">
    <ul class="tabs">
        <li><a href="#tab1" class="default tab1 tabpages">Tab One</a></li>
        <li><a href="#tab2" class="tab2 tabpages">Tab Two</a></li>
        <li><a href="#tab3" class="tab3 tabpages">Tab Three</a></li>
        <li><a href="#tab4" class="tab4 tabpages">Tab Four</a></li>
        <li><a href="#tab5" class="tab5 tabpages">Tab Five</a></li>
    </ul>
    <div id="view1" class="tabcontent default">
        <h4>Tab 'persist'</h4>
        <p>The most recently clicked tab will be remembered and stay open even if you     click elsewhere on the page or if the page is reloaded.</p>
    </div>
    <div id="view2" class="tabcontent">
        <h4>Multiple Tabs</h4>
        <p>You can have multiple tabs on the same page, with only one copy of the CSS     (javascript is not required).</p>
    </div>
    <div id="view3" class="tabcontent">
        <h4>Tab Action from elsewhere on the same page.</h4>
        <p>You can also open a tab using links elsewhere on the same page.</p>
        <p>If you click this <a href="#tab1" class="tabpages">LINK</a> you will open 'Tab One' content, and if you click the link beneath this Tab Content you will open 'Tab #2' content.</p>
    </div>
    <div id="view4" class="tabcontent">
        <h4>Opened by a link from another page</h4>
        <p>Link from another page can select a tab on the target page when loaded.</p>
    </div>
    <div id="view5" class="tabcontent">
        <h4>No restrictions on tab content</h4>
        <img src="pollensa.jpg" alt=" Polenca - Mallorca" />
        <p>Port de Pollença (Catalan pronunciation: [ˈpɔrd də poˈʎɛnsə]) (Puerto Pollensa in Castilian Spanish) is a small town in north-eastern Mallorca, Spain, situated on the Bay of Pollença. It is located about six kilometres east of the inland town of Pollença and two kilometres southeast of Cala Sant Vicenç.</p>
        <p>From <a href="http://en.wikipedia.org/wiki/Port_de_Pollen%C3%A7a">Wikipedia</a>, the free encyclopedia.</p>
        <br />
        <p>Photograph &copy stu nicholls</p>
    </div>
</div>
<p>&nbsp;</p>
<b id="tab6" class="hiddenTarget"></b>
<b id="tab7" class="hiddenTarget"></b>
<b id="tab8" class="hiddenTarget"></b>
<b id="tab9" class="hiddenTarget"></b>
<b id="tab10" class="hiddenTarget"></b>
<div class="tabbedPages">
    <ul class="tabs">
        <li><a href="#tab6" class="default tab6 tabpages">Tab One</a></li>
        <li><a href="#tab7" class="tab7 tabpages">Tab #2</a></li>
        <li><a href="#tab8" class="tab8 tabpages">Tab No.3</a></li>
        <li><a href="#tab9" class="tab9 tabpages">The Fourth Tab</a></li>
        <li><a href="#tab10" class="tab10 tabpages">Any Content</a></li>
    </ul>
    <div id="view6" class="tabcontent default">
        <h4>Tab 'persist'</h4>
        <p>The most recently clicked tab will be remembered and stay open even if you click elsewhere on the page or if the page is reloaded.</p>
    </div>
    <div id="view7" class="tabcontent">
        <h4>Multiple Tabs</h4>
        <p>You can have multiple tabs on the same page, with only one copy of the CSS (javascript is not required).</p>
    </div>
    <div id="view8" class="tabcontent">
        <h4>Tab Action from elsewhere on the same page.</h4>
        <p>You can also open a tab using links elsewhere on the same page.</p>
        <p>If you click this <a href="#tab1" class="tabpages">LINK</a> you will open 'Tab One' content, and if you click the link beneath this Tab Content you will open 'Tab #2' content.</p>
    </div>
    <div id="view9" class="tabcontent">
        <h4>Opened by a link from another page</h4>
        <p>Link from another page can select a tab on the target page when loaded.</p>
    </div>
    <div id="view10" class="tabcontent">
        <h4>No restrict ions on tab content</h4>
        <img src="pollensa.jpg" alt=" Polenca - Mallorca" />
        <p>Port de Pollença (Catalan pronunciation: [ˈpɔrd də poˈʎɛnsə]) (Puerto Pollensa in Castilian Spanish) is a small town in north-eastern Mallorca, Spain, situated on the Bay of Pollença. It is located about six kilometres east of the inland town of Pollença and two kilometres southeast of Cala Sant Vicenç.</p>
        <p>From <a href="http://en.wikipedia.org/wiki/Port_de_Pollen%C3%A7a">Wikipedia</a>, the free encyclopedia.</p>
        <br />
        <p>Photograph &copy stu nicholls</p>
    </div>
</div>

您可以在此处查看操作代码（向下滚动一下）：crystalvaults.com/medicine-wheel-guide

谢谢！

编辑添加：我目前正在弄乱代码，看看我是否可以修复它，所以如果你访问它可能看起来有点时髦。

Answer 1

您遇到的问题是因为两组CSS标签具有相同的ID。复制/粘贴CSS并更改ID有效，但将来你应该尽量不这样做。更好的方法是除了ID之外，为每个元素分配一个“类”。这将允许您重用已有的CSS。然后，您将使用javascript根据其ID进行操作。

希望这有帮助！ 波比

Answer 2

这是适合我的代码。带有CSS和HTML的标签。这可能不是最干净的代码，但是如果你遇到同样的问题它会起作用。

<强> CSS：

.hiddenTarget {
    display:none;
    position:fixed;
}
.tabbedPages {
    position:relative;
    margin:50px 0;
    display:block;
}
ul.tabs {
    padding:0;
    margin:0;
    list-style:none;
    float:left;
    position:relative;
    z-index:100;
}
ul.tabs li {
    float:left;
    margin-right:2px;
}
ul.tabs li a {
    display:block;
    font:normal 12px/30px arial, sans-serif;
    border:1px solid #aaa;
    border-radius:5px 5px 0 0;
    background:#69c;
    padding:0 20px;
    text-decoration:none;
    color:#fff;
    background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, rgba(255, 255, 255, 0.7)), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.5, transparent), to(rgba(255, 255, 255, 0.3)));
    background-image:-moz-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
    background-image:-ms-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
    background-image:-o-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
    background-image:linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
}
.tabcontent {
    float:left;
    width:700px;
    padding:20px;
    border:1px solid #aaa;
    border-radius:0 5px 5px 5px;
    background:#fff;
    position:relative;
    z-index:10;
    display:none;
    clear:left;
    top:-1px;
    box-shadow:0 15px 10px -15px rgba(0,0,0,0.4);
}
.tabcontent p {
    padding:0 0 5px 0;
    margin:0;
    font:normal 12px/20px arial, sans-serif;
    color:#333;
}
.tabcontent h4 {
    padding:0 0 10px 0;
    margin:0;
    font:bold 14px/25px arial, sans-serif;
    color:#000;
}
.tabcontent img {
    border:1px solid #444;
    display:block;
    float:left;
    margin:0 20px 0 0;
    box-shadow:0 15px 10px -15px rgba(0,0,0,0.4);
}

/* change the tab to selected style */
ul.tabs li a.default, #tab1:target ~ .tabbedPages .tabs li a.default, #tab2:target ~ .tabbedPages .tabs li a.tab2, #tab3:target ~ .tabbedPages .tabs li a.tab3, #tab4:target ~ .tabbedPages .tabs li a.tab4, #tab5:target ~ .tabbedPages .tabs li a.tab5 {
background-color:#fff;
border-bottom:1px solid #fff;
color:#000;
}

/* show the tab content */
div.default, #tab1:target ~ .tabbedPages div.default, #tab2:target ~ .tabbedPages div#view2, #tab3:target ~ .tabbedPages div#view3, #tab4:target ~ .tabbedPages div#view4, #tab5:target ~ .tabbedPages div#view5 {
display:block;
}

/* reset the unclicked tabs to default */
#tab2:target ~ .tabbedPages .tabs li a.default, #tab3:target ~ .tabbedPages .tabs li a.default, #tab4:target ~ .tabbedPages .tabs li a.default, #tab5:target ~ .tabbedPages .tabs li a.default {
background-color:#69c;
border:1px solid #888;
color:#fff;
}

/* hide the default tab when selecting other tabs*/
#tab2:target ~ .tabbedPages div.default, #tab3:target ~ .tabbedPages div.default, #tab4:target ~ .tabbedPages div.default, #tab5:target ~ .tabbedPages div.default {
display:none;
}
.clear {
    clear:left;
}
}
.hiddenTargetTwo {
    display:none;
    position:fixed;
}
.tabbedPagesTwo {
    position:relative;
    margin:50px 0;
    display:block;
}
ul.tabsTwo {
    padding:0;
    margin:0;
    list-style:none;
    float:left;
    position:relative;
    z-index:100;
}
ul.tabsTwo li {
    float:left;
    margin-right:2px;
}
ul.tabsTwo li a {
    display:block;
    font:normal 12px/30px arial, sans-serif;
    border:1px solid #aaa;
    border-radius:5px 5px 0 0;
    background:#69c;
    padding:0 20px;
    text-decoration:none;
    color:#fff;
    background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, rgba(255, 255, 255, 0.7)), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.5, transparent), to(rgba(255, 255, 255, 0.3)));
    background-image:-moz-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
    background-image:-ms-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
    background-image:-o-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
    background-image:linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
}
.tabcontentTwo {
    float:left;
    width:700px;
    padding:20px;
    border:1px solid #aaa;
    border-radius:0 5px 5px 5px;
    background:#fff;
    position:relative;
    z-index:10;
    display:none;
    clear:left;
    top:-1px;
    box-shadow:0 15px 10px -15px rgba(0,0,0,0.4);
}
.tabcontentTwo p {
    padding:0 0 5px 0;
    margin:0;
    font:normal 12px/20px arial, sans-serif;
    color:#333;
}
.tabcontentTwo h4 {
    padding:0 0 10px 0;
    margin:0;
    font:bold 14px/25px arial, sans-serif;
    color:#000;
}
.tabcontentTwo img {
    border:1px solid #444;
    display:block;
    float:left;
    margin:0 20px 0 0;
    box-shadow:0 15px 10px -15px rgba(0,0,0,0.4);
}

/* change the tab to selected style */
ul.tabsTwo li a.default, #tab6:target ~ .tabbedPagesTwo .tabsTwo li a.tab6, #tab7:target ~ .tabbedPagesTwo .tabsTwo li a.tab7, #tab8:target ~ .tabbedPagesTwo .tabsTwo li a.tab8, #tab9:target ~ .tabbedPagesTwo .tabsTwo li a.tab9, #tab10:target ~ .tabbedPagesTwo .tabsTwo li a.tab10 {
background-color:#fff;
border-bottom:1px solid #fff;
color:#000;
}

/* show the tab content */
div.default, #tab6:target ~ .tabbedPagesTwo div#view6, #tab7:target ~ .tabbedPagesTwo div#view7, #tab8:target ~ .tabbedPagesTwo div#view8, #tab9:target ~ .tabbedPagesTwo div#view9, #tab10:target ~ .tabbedPagesTwo div#view10 {
display:block;
}

/* reset the unclicked tabs to default */
#tab6:target ~ .tabbedPagesTwo .tabsTwo li a.default, #tab7:target ~ .tabbedPagesTwo .tabsTwo li a.default, #tab8:target ~ .tabbedPagesTwo .tabsTwo li a.default,, #tab9:target ~ .tabbedPagesTwo .tabsTwo li a.default, #tab10:target ~ .tabbedPagesTwo .tabsTwo li a.default {
background-color:#69c;
border:1px solid #888;
color:#fff;
}

/* hide the default tab when selecting other tabs*/
#tab6:target ~ .tabbedPagesTwo div.default, #tab7:target ~ .tabbedPagesTwo div.default, #tab8:target ~ .tabbedPagesTwo div.default, #tab9:target ~ .tabbedPagesTwo div.default, #tab10:target ~ .tabbedPagesTwo div.default {
display:none;
}

<强> HTML：

<b id="tab1" class="hiddenTarget"></b>
<b id="tab2" class="hiddenTarget"></b>
<b id="tab3" class="hiddenTarget"></b>
<b id="tab4" class="hiddenTarget"></b>
<b id="tab5" class="hiddenTarget"></b>
<div class="tabbedPages">
    <ul class="tabs">
        <li><a href="#tab1" class="default tab1 tabpages">Tab One</a></li>
        <li><a href="#tab2" class="tab2 tabpages">Tab Two</a></li>
        <li><a href="#tab3" class="tab3 tabpages">Tab Three</a></li>
        <li><a href="#tab4" class="tab4 tabpages">Tab Four</a></li>
        <li><a href="#tab5" class="tab5 tabpages">Tab Five</a></li>
    </ul>
    <div id="view1" class="tabcontent default">
        <h4>Tab 'persist'</h4>
        <p>The most recently clicked tab will be remembered and stay open even if you click elsewhere on the page or if the page is reloaded.</p>
    </div>
    <div id="view2" class="tabcontent">
        <h4>Multiple Tabs</h4>
        <p>You can have multiple tabs on the same page, with only one copy of the CSS (javascript is not required).</p>
    </div>
    <div id="view3" class="tabcontent">
        <h4>Tab Action from elsewhere on the same page.</h4>
        <p>You can also open a tab using links elsewhere on the same page.</p>
        <p>If you click this <a href="#tab1" class="tabpages">LINK</a> you will open 'Tab One' content, and if you click the link beneath this Tab Content you will open 'Tab #2' content.</p>
    </div>
    <div id="view4" class="tabcontent">
        <h4>Opened by a link from another page</h4>
        <p>Link from another page can select a tab on the target page when loaded.</p>
    </div>
    <div id="view5" class="tabcontent">
        <h4>No restrictions on tab content</h4>
        <img src="pollensa.jpg" alt=" Polenca - Mallorca" />
        <p>Port de Pollença (Catalan pronunciation: [ˈpɔrd də poˈʎɛnsə]) (Puerto Pollensa in Castilian Spanish) is a small town in north-eastern Mallorca, Spain, situated on the Bay of Pollença. It is located about six kilometres east of the inland town of Pollença and two kilometres southeast of Cala Sant Vicenç.</p>
        <p>From <a href="http://en.wikipedia.org/wiki/Port_de_Pollen%C3%A7a">Wikipedia</a>, the free encyclopedia.</p>
        <br />
        <p>Photograph &copy stu nicholls</p>
    </div>
</div>
<p>&nbsp;</p>
<b id="tab6" class="hiddenTargetTwo"></b>
<b id="tab7" class="hiddenTargetTwo"></b>
<b id="tab8" class="hiddenTargetTwo"></b>
<b id="tab9" class="hiddenTargetTwo"></b>
<b id="tab10" class="hiddenTargetTwo"></b>
<div class="tabbedPagesTwo">
    <ul class="tabsTwo">
        <li><a href="#tab6" class="default tab6 tabpagesTwo">Tab Six</a></li>
        <li><a href="#tab7" class="tab7 tabpagesTwo">Tab Seven</a></li>
        <li><a href="#tab8" class="tab8 tabpagesTwo">Tab Eight</a></li>
        <li><a href="#tab9" class="tab9 tabpagesTwo">Tab Nine</a></li>
        <li><a href="#tab10" class="tab10 tabpagesTwo">Tab Ten</a></li>
    </ul>
    <div id="view6" class="tabcontentTwo default">
        <h4>Tab 'persist'</h4>
        <p>The most recently clicked tab will be remembered and stay open even if you click elsewhere on the page or if the page is reloaded.</p>
    </div>
    <div id="view7" class="tabcontentTwo">
        <h4>Multiple Tabs</h4>
        <p>You can have multiple tabs on the same page, with only one copy of the CSS (javascript is not required).</p>
    </div>
    <div id="view8" class="tabcontentTwo">
        <h4>Tab Action from elsewhere on the same page.</h4>
        <p>You can also open a tab using links elsewhere on the same page.</p>
        <p>If you click this <a href="#tab1" class="tabpages">LINK</a> you will open 'Tab One' content, and if you click the link beneath this Tab Content you will open 'Tab #2' content.</p>
    </div>
    <div id="view9" class="tabcontentTwo">
        <h4>Opened by a link from another page</h4>
        <p>Link from another page can select a tab on the target page when loaded.</p>
    </div>
    <div id="view10" class="tabcontentTwo">
        <h4>No restrict ions on tab content</h4>
        <img src="pollensa.jpg" alt=" Polenca - Mallorca" />
        <p>Port de Pollença (Catalan pronunciation: [ˈpɔrd də poˈʎɛnsə]) (Puerto Pollensa in Castilian Spanish) is a small town in north-eastern Mallorca, Spain, situated on the Bay of Pollença. It is located about six kilometres east of the inland town of Pollença and two kilometres southeast of Cala Sant Vicenç.</p>
        <p>From <a href="http://en.wikipedia.org/wiki/Port_de_Pollen%C3%A7a">Wikipedia</a>, the free encyclopedia.</p>
        <br />
        <p>Photograph &copy stu nicholls</p>
    </div>
</div>