0

ページ上のアクティブなリンクをbgの単色にします。これを行うにはjQueryが必要だと思います。このコードを試しましたが、機能しません。

<script type="text/javascript">
$(document).ready(function(){
$("#navigation").each(function(){
    if($(this).attr('href') == document.URL){
        $(this).css("background-Color", "#e9fd99");
    }
});
});
</script>

明確にするために私の写真を参照してください：

ここに画像の説明を入力してください

ご覧のとおり、リンクを表示しているページに応じて、静的なBGカラーが点灯します。

- - - - - - - - - - - -アップデート - - - - - - - - - - - - -

HTMLコード：

<div id="navigation">
<div class="sb_pos">
<ul id="red" class="treeview-red">

<li class="open">
    <span class="tree_titles">About</span>
    <ul>


        <li><span><a href="?page=about_getting_started">Getting Started</a></span></li>
        <li><span><a href="?page=about_recruiting_process">Recruiting Process</a></span></li>
        <li><span><a href="?page=about_responsibility">Responsibility</a></span></li>
        <li><span><a href="?page=about_opportunity">Opportunity</a></span></li>
4

5 に答える 5

2

必要に応じて、cssのみでそれを行うことができます。各ページの本文に一意のID（たとえば、about、contact、tagsなど）を付けます。次に、各リンクに一意のID、aboutlink、contactlink、tagslinkなどを付けます。

次に、cssにスタイルを記述します。

body#about a#aboutlink,
body#contact a#contactlink,
body#tags a#tagslink {
    background-color: #e9fd99;
}
于 2012-07-17T05:55:00.700 に答える
0

私はあなたがこれを意味したと思います

         $("#navigation").each(function(){

これの代わりに

        $("navigation").each(function(){

idで選択する場合は、＃navigationを使用し、クラス名がnavigationの場合は、.navigationを使用します。

これを試して

    <script type="text/javascript">
         $(document).ready(function(){
             $(".newclass > li").each(function(){
                 if($(this).attr('href') == document.URL){
                    $(this).css("background-Color", "#e9fd99");
                 }
             });
        });
   </script>

これを追加

     <ul class="newclass">
    <li><span><a href="?page=about_getting_started">Getting Started</a></span></li>
    <li><span><a href="?page=about_recruiting_process">Recruiting Process</a></span>   </li>
    <li><span><a href="?page=about_responsibility">Responsibility</a></span></li>
    <li><span><a href="?page=about_opportunity">Opportunity</a></span></li>

親の直接の子を選択する必要があります。

于 2012-07-13T01:29:11.267 に答える
0

これを試して、console.logのコメントを外し、hrefが必要なものと等しいかどうかを確認してください

<script type="text/javascript" charset="utf-8">
    jQuery(document).ready(function($){
        $("#navigation").each(function(){
            //console.log($(this).attr('href'));
            //console.log(window.location.search);
            if($(this).attr('href') == window.location.search){
                $(this).css("background-Color", "#e9fd99");
            }
        });
    });
</script>
于 2012-07-13T02:00:12.210 に答える
0

JavaScriptにはいくつか問題があります。まず、jQueryの「each」関数は、選択された要素の子を反復処理するのではなく、選択された要素のすべてのインスタンスを反復処理します。使用中のこの関数の例については、http：//api.jquery.com/each/を参照してください。だから代わりに

$("#navigation").each(function(){
    ...
});

「li」要素を反復処理する場合は、次を使用する必要があります

 $("#navigation li").each(function(){
    ...
});

または、li要素を選択するより具体的なセレクター（指定$(".open li")したHTMLに基づく場合もあります）。li">"セレクターは直接の子を指定し、はの直接の子ではないため、使用できないことに注意してくださいdiv。

次に、を選択すると、属性を持たないを参照するため、li参照できなくなります。またはで選択した要素の下にある要素を選択する必要があります。(this).attr('href')thislihrefali$("a", this)$(this).find("a")

最後に、現在のドキュメントのURL全体（http：//およびall）を返しますが、これをリンクdocument.URLのプロパティと比較しています。これは単なる相対パスです。あなたが正しいリンクを見ているとしても、これは決して等しくなることはありません。代わりに使用することをお勧めします。これにより、現在の相対パスが返されます。href?page=about_getting_startedwindow.location.pathname

于 2012-07-13T02:05:17.407 に答える
0

これは非常にシンプルなソリューションです。PHPを使用して、URLから目的の値を取得し、取得した値を次のようなjQueryコードに挿入できます。

$('.#').addClass('active');

ここで、「＃」はURLから取得した値です。例えば：

<?php

echo '<script type="text/javascript">
$(document).ready(function(){';
if(intval($_GET['page']) > 0) {
    $from_url = intval($_GET['page']);
    } else {
        if(isset($_GET['page'])) {
        $from_url = $_GET['page'];
        } else {
        $from_url = 'index';
        }
    }
echo '
    $(\'' . $from_url . '\').addClass(\'active\');
    });
</script>';

?>

ここでも説明します。

于 2012-08-02T02:34:59.237 に答える