0

ナビゲーションバーを強調表示しようとしています。つまり、現在サーフィンしているアクティブなページのボタンを強調表示する必要があります。私はこのようにしようとしましたが、うまくいきません。ナビゲーションメニューとして次のHTMLコードがあります。

<code>
<ul class="nav">
    <li class="first">
        <a href="index.htm">Home</a>
    </li>

    <li>
        <a class="hasdropdown" href="collections/catalog/catalog.htm">Catalog</a>                       
    </li>

    <li>                            
        <a class="hasdropdown" href="collections/ocassions/ocassions.htm">Ocassions</a>
    </li>

    <li>
        <a class="hasdropdown" href="collections/specials/specials.htm">Specials</a>
    </li>

    <li>                            
        <a href="pages/plants.htm">Plants</a>                              
    </li>

    <li>
        <a href="pages/exotic.htm">Exotic</a>
    </li>

    <li>
        <a href="pages/contact.htm">Contact</a>
    </li>
</ul>

そして私もこのCSSを持っています

#header #navblock ul.nav li a:hover {
    background-color: #b23758;
    color: #ffffff;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
}

#header #navblock ul.nav li a.active:visited {
    background-color: #b23758;
    color: #ffffff;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
}

<br/>

彼らはうまくいかない！誰かがそれを正しく行う方法を説明できるかどうか教えてください。前もって感謝します！

4

3 に答える 3

1

.current現在閲覧しているページにクラスを追加することをお勧めします。したがって、ユーザーがホームページを表示している場合：

<li class="first">
        <a href="index.htm" class="current">Home</a>
    </li>

次に、.currentクラスを好きなように構成します。

.current {
    background-color: #b23758;
    color: #ffffff;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
}

参照。 http://alistapart.com/article/keepingcurrent

于 2013-02-26T13:49:00.417 に答える
1

これはおそらくあなたを助けるでしょう：http：//hicksdesign.co.uk/journal/highlighting-current-page-with-css

基本的には、次のように各ページにIDを追加するという考え方です。

<body id="home">

そして、あなたはすでにソートされていないリストとしてナビゲーションを持っているので、これに似ています：

<ul id="navlist">
    <li><a href="index.html" id="homenav">Home</a></li>
    <li><a href="products.html" id="prodnav">Products</a></li>
    <li><a href="faq.html" id="faqnav">FAQ</a></li>
    <li><a href="contact.html" id="connav">contact us</a></li>
</ul>

次に、次のようにcssを使用できます。

body#home a#homenav,
body#products a#prodnav,
body#faq a#faqnav,
body#contact a#connav {
    color: #fff;
    background: #930;
}

これは、body id = "home"の場合、id="homenav"とのリンクのスタイルが次のようになることを定義しています。

于 2013-02-26T14:10:01.753 に答える
0

あなたが何を達成したいのか理解できたら、アクティブなページのボタンにクラスを追加する必要があります。

カタログページを表示しているとしましょう。したがって、リンクは次のようになります。

<li>
    <a class="hasdropdown active" href="collections/catalog/catalog.htm">Catalog<a>                       
</li>

この例では、リンクカタログのクラスは「アクティブ」です。そして今、あなたはこのクラスのためにあなたのcssを設定することができます、そしてそれで、このボタンのために：

.active {
    background-color: #b23758;
    color: #ffffff;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    }

もちろん、これは、Webサイトの各ページが、対応するリンクに「アクティブ」クラスのメニューを表示する必要があることを意味します。

于 2013-02-26T13:51:35.603 に答える