Question

我目前正在尝试使用“有机标签”（http://css-tricks.com/organic-tabs/）创建计划，但在更改标签名称和添加标签时遇到困难。这是我在CSS中改变的内容：

#example-one li.nav-one a.current, ul.Monday li a:hover { background-color: #0575f4; color: white; }
#example-one li.nav-two a.current, ul.Tuesday li a:hover { background-color: #d30000; color: white; }
#example-one li.nav-three a.current, ul.jquerytuts li a:hover { background-color: #8d01b0; color: white; }
#example-one li.nav-four a.current, ul.thursday li a:hover { background-color: #FE4902; color: white; }
#example-one li.nav-five a.current, ul.friday li a:hover { background-color: #33CC33; color: white; }
#example-one li.nav-six a.current, ul.saturday li a:hover { background-color: #FF19FF; color: white; }
#example-one li.nav-seven a.current, ul.sunday li a:hover { background-color: #FFFF00; color: white; }

这就是我在HTML中所做的改变：

      <div id="example-one">

<ul class="nav">
            <li class="nav-one"><a href="#Monday" class="current">Monday</a></li>
            <li class="nav-one"><a href="#Tuesday">Tuesday</a></li>
            <li class="nav-one"><a href="#Wednesday">Wednesday</a></li>
            <li class="nav-one"><a href="#classics">Thursday</a></li>
            <li class="nav-one"><a href="#jquerytuts">Friday</a></li>
            <li class="nav-one"><a href="#jquerytuts">Saturday</a></li>
            <li class="nav-one last"><a href="#jquerytuts">Sunday</a></li>
</ul>

<div class="list-wrap">

    <ul id="Monday">
        <li><a href="#test">Some Stuff</a></li>
     </ul>

</div> <!-- END List Wrap -->

Java不受影响，与提供的网站相同。如果我不将它们更改为“星期一”，那么它可以正常工作，但如果我改变它们，就像我想要的那样，悬停就可以了，只是不改变到不同的列表。

有什么想法吗？我想它可能是Javascript，因为我不知道如何正确使用Javascript ...

Answer 1

Here jsfiddle的示例，底部有你的css。

我正在更改标签名称（第一个）和添加标签（最后一个）。

<div id="example-one">

        <ul class="nav">
            <li class="nav-one"><a href="#featured" class="current">Rename Featured</a></li> <!-- rename -->
            <li class="nav-two"><a href="#core">Core</a></li>
            <li class="nav-three"><a href="#jquerytuts">jQuery</a></li>
            <li class="nav-four "><a href="#classics">Classics</a></li>
            <li class="nav-five last"><a href="#jquerytuts">Adding tab</a></li><!-- add -->
        </ul>
        [...]

这就是你想要的？

在“有机”选项卡上添加和编辑选项卡

1 个答案: