0

すべて、現在、ナビゲーションメニューに次のCSSがあります。

#primary-menu, .default-menu, #mobile-menu-dropdown li, .site-navigation a {
  font-size: 32px;
}

次に、メニューを表示するための次のHTMLがあります。

<nav id="primary-menu-container" role="navigation" class="site-navigation main-navigation clearfix">
<div class="menu-main-menu-container">
<ul id="primary-menu" class="menu">
<li id="menu-item-79" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-79"><a href="http://website.com/new_site/">Home</a></li>
<li id="menu-item-38" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-38"><a href="http://website.com/new_site/tagged?tag=news">News</a></li>
<li id="menu-item-69" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-69"><a href="http://website.com/new_site/tagged">Blog</a></li>
<li id="menu-item-71" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-71"><a href="http://website.com/new_site/music">Music</a></li>
<li id="menu-item-73" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-73"><a href="http://website.com/new_site/shows">Shows</a></li>
<li id="menu-item-75" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-75"><a href="http://website.com/new_site/photos">Photos</a></li>
<li id="menu-item-76" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-76"><a href="http://website.com/new_site/videos">Videos</a></li>
<li id="menu-item-113" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-113"><a href="http://website.com/new_site/faq">FAQ</a></li>
<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="http://website.com/new_site/contact">Contact</a></li>
</ul></div>             
</nav>

誰かがこれらのリンクの1つをクリックしたときに、リンクをアクティブにして、たとえば＃FF0000に色を付けたいと思います。次のCSSを試しましたが、新しいページが読み込まれたときに色が保持されません。

#primary-menu, .default-menu, #mobile-menu-dropdown li, .site-navigation a:active {
  color: #FF0000;
}

誰かがこれを機能させる方法について何かアイデアがありますか？

編集：ExplosionPillsが推奨するようにjQueryを追加しました。このjQueryは次のようになります。

jQuery(".menu a").each(function () {
    if(jQuery(this).attr('href') === jQuery(location).attr('href')){
        if (jQuery(this).attr('title') === jQuery(this).text()) {
            alert("It is in here and the title is: " + jQuery(this).attr('title'));
            jQuery(this).css('color', '#FF0000');
        }
    }
});

アラートに正常に到達していますが、指定した色がリンクに適用されていません（どのリンクにも適用されません）

ページへのリンク：http：//tinyurl.com/a7tpvwy

4

5 に答える 5

3

次のページを読み込む必要があると思いますが、CSS は現在どのページにいるかを知る方法がないため、これは CSS だけでは不可能です。location電流がリンクの場所と等しいかどうかを確認し、緑色で強調表示する JavaScript ソリューションを採用することもできます。

Array.prototype.forEach.call(document.querySelectorAll('a'), function (elem) {
    if (elem.getAttribute('href') === window.location.pathname) {
        elem.style.color = '#FF0000';
    }
});

より簡単な方法は、サーバー側で処理することです。ヘッダー リンクを印刷するときは、現在の場所を確認し、一致する場合はリンクのスタイルを設定します。

編集: jQuery のバージョン:

$("a").each(function () {
    if ($(this).attr('href') === window.location.pathname) {
        $(this).css('color', '#FF0000');
    }
});
于 2013-03-02T16:43:10.643 に答える
1

リンクのスタイルを設定する簡単な方法:

ul.menu li a:active {color: #FF0000;}

編集：申し訳ありませんが、新しいページが読み込まれたときに色を保持したいと言った部分を見逃しました. 言われているように、そのためにはクライアント/サーバー側のコードが必要です。

于 2013-03-02T16:50:10.703 に答える
0

あなたがやろうとしていることを行うには、最初 に a:hover を理解する必要があります。有効にするためには、CSS 定義でa:linkとa:visited の後に来る必要があります。この順序でないと機能しません。

2 つ目は、思考 (a:active) がエンド ユーザーが使用している現在のリンクの色を意味する場合、これは正しくないことを理解する必要があります。(a:active) は、リンクをクリックすると色が変わります。(a:active) で別の色にしたリンク上でマウス ボタンを押したままにすると、これをテストできます。

最後に、CSS のみを使用してこれを実行しようとしている場合は、エンド ユーザーがいる現在のリンクに特定のクラスを追加する必要があります。以下に、これが役立つことを願って例を残しました:)

次のようなナビゲーション バー
-
ホーム-ニュース -
ブログ -
その他...

この例の「ブログ」ページにいます。

 /*YOUR CSS SHOULD LOOK LIKE THIS*/
    /* Note: You can make these any colors you want *\

    /* unvisited link grey */
    #primary-menu-container a:link {
    	color: #777;
    }
    /* visited link grey */
    #primary-menu-container a:visited {
    	color: #777;
    }
    /* mouse over link blue */
    #primary-menu-container a:hover {
    	color: #0CF;
    }
    /* selected link blue */
    #primary-menu-container a:active {
    	color: #0CF;
    }
    /* !IMPORTANT ONLY ADD THIS CLASS TO YOUR ACTIVE PAGE LINK ( Color Blue )*/
    /* Note: You can make this any color you want */
    
    .activePage a {
    	color: #0CF !important
    }
<nav id="primary-menu-container" role="navigation">
<div class="menu-main-menu-container">
<ul id="primary-menu" class="menu">
<li id="menu-item-79" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-79"><a href="http://website.com/new_site/">Home</a></li>
<li id="menu-item-38" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-38"><a href="http://website.com/new_site/tagged?tag=news">News</a></li>
<li id="menu-item-69" class="activePage"><a href="http://website.com/new_site/tagged">Blog</a></li><!-- Notice the clase="activePage" -->
<li id="menu-item-71" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-71"><a href="http://website.com/new_site/music">Music</a></li>
<li id="menu-item-73" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-73"><a href="http://website.com/new_site/shows">Shows</a></li>
<li id="menu-item-75" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-75"><a href="http://website.com/new_site/photos">Photos</a></li>
<li id="menu-item-76" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-76"><a href="http://website.com/new_site/videos">Videos</a></li>
<li id="menu-item-113" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-113"><a href="http://website.com/new_site/faq">FAQ</a></li>
<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="http://website.com/new_site/contact">Contact</a></li>
</ul></div>             
</nav>

他のリンクに .activePage タグを入れていないことに注意してください。これが行うことは、アクティブなページが別の色で固定されている間、ナビゲーション バー用に CSS で選択した元の色を引き続き使用できるようにすることです。

これが機能した理由は、その別のクラスの色の最後に!importantを追加したためです。

.activePage {
      color: #0CF !important
    }

この同じ手法を他のページに適用するには、次のようにします。

「ホームページ」

 /*YOUR CSS SHOULD LOOK LIKE THIS*/
    /* Note: You can make these any colors you want *\

    /* unvisited link grey */
    #primary-menu-container a:link {
    	color: #777;
    }
    /* visited link grey */
    #primary-menu-container a:visited {
    	color: #777;
    }
    /* mouse over link blue */
    #primary-menu-container a:hover {
    	color: #0CF;
    }
    /* selected link blue */
    #primary-menu-container a:active {
    	color: #0CF;
    }
    /* !IMPORTANT ONLY ADD THIS CLASS TO YOUR ACTIVE PAGE LINK ( Color Blue )*/
    /* Note: You can make this any color you want */
    
    .activePage a {
    	color: #0CF !important
    }
 <nav id="primary-menu-container" role="navigation">
<div class="menu-main-menu-container">
<ul id="primary-menu" class="menu">
<li id="menu-item-79" class="activePage"><a href="http://website.com/new_site/">Home</a></li><!-- Notice the clase="activePage" -->
<li id="menu-item-38" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-38"><a href="http://website.com/new_site/tagged?tag=news">News</a></li>
<li id="menu-item-69" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-69"><a href="http://website.com/new_site/tagged">Blog</a></li>
<li id="menu-item-71" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-71"><a href="http://website.com/new_site/music">Music</a></li>
<li id="menu-item-73" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-73"><a href="http://website.com/new_site/shows">Shows</a></li>
<li id="menu-item-75" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-75"><a href="http://website.com/new_site/photos">Photos</a></li>
<li id="menu-item-76" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-76"><a href="http://website.com/new_site/videos">Videos</a></li>
<li id="menu-item-113" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-113"><a href="http://website.com/new_site/faq">FAQ</a></li>
<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="http://website.com/new_site/contact">Contact</a></li>
</ul></div>             
</nav>

あなたの質問にしっかりと答えていただければ幸いです。

于 2014-09-22T07:52:00.247 に答える
0

.site-navigation:visited訪問したリンクを試してください。ここを参照してください：http://jsfiddle.net/Kgxrw/

于 2013-03-02T16:43:45.953 に答える
0

あなたのCSSはあなたが思っていることをしていません:

#primary-menu, .default-menu, #mobile-menu-dropdown li, .site-navigation a:active

カンマはそうでORはないことを表しますAND

于 2013-03-02T16:44:04.563 に答える