0

我目前正在尝试使用有机标签（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...

4

1 回答 1

0

这是一个关于 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>
        [...]

那是你想要的吗？

于 2013-07-14T20:12:43.740 回答