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 はそのままなので、提供されている Web サイトと同じです。それらを「月曜日」に変更しないと機能しますが、変更すると、ホバーが機能し、別のリストに変更されません。

何か案は？Javascriptの正しい使い方がわからないので、Javascriptのせいかもしれないと思っています...

4

1 に答える 1

0

ここでは、css を下部に配置した jsfiddle の例を示します。

タブ名 (最初) を変更し、タブ (最後) を追加しました。

<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 に答える