1

私はjqueryを次のように書きました

   <script type="text/javascript">
     var jq = $.noConflict();
     jq(document).ready(function(){
     jq("a.tag-link").click(function(){
     jq(".selected").removeClass("selected");
     jq(this).addClass("selected");
    });
   });
  </script>

htmlは次のようなものです

 <a href="home.html"class="tag-link selected" >home</a>
 <a href="about-us.html"class="tag-link" >about us</a>
 <a href="why-us.html"class="tag-link" >why-us</a>

css a.selected{color:red;} の場合、私の問題は、リンクをクリックすると、クリックしたときにのみ色が赤に変わることです。しかし、それが私たちについてのページにリダイレクトされた後、その色はデフォルトのものに変わります。赤くなりません。クリックしたリンクを赤色にし、他のリンクをデフォルトの色にしたいのですが、助けてください...

4

3 に答える 3

7

jQueryコード全体を削除し、CSSを使用します。

a:visited {
    color:#FF0000; /* Or color:red; if you prefer not using the hex codes) */
}

リンクに使用できるセレクターは次のとおりです。

a:link {}
通常の未訪問リンクのスタイルを定義します。

a:visited {}
訪問したリンクのスタイルを定義します。

a:active {}
アクティブなリンクのスタイルを定義します。
リンクをクリックすると、リンクがアクティブになります。

a:hover {} ホバーされたリンクのスタイルを定義します。
リンクの上にマウスを移動すると、リンクにカーソルを合わせます。

出典

または、リンクをクリックしたときにこの選択を維持したいが、クリックしたすべてのリンクに適用しない場合は、次を使用しますlocalStorage

var jq = $.noConflict();
jq(document).ready(function(){
    if(localStorage.getItem("clickedLinkId")){ // If "clickedLinkClass" has been set.
        jq('#'+localStorage.getItem("clickedLinkId")).addClass("selected"); // add the class "Selected", to the previously clicked link.
    }
    jq("a.tag-link").click(function(){ // On click
        jq(".selected").removeClass("selected");
        jq(this).addClass("selected");
        localStorage.setItem("clickedLinkId", jq(this).attr("id")); // Save the class of the current element in the localStorage.
    });
});

HTML:

<a href="home.html"class="tag-link selected" id="home" >home</a>
<a href="about-us.html"class="tag-link" id="about" >about us</a>
<a href="why-us.html"class="tag-link" id="why" >why-us</a>

これにより、以前にクリックしたリンクのクラスが設定され、クリックしたリンクがに保存されますlocalStorage

作業サンプル

于 2012-12-05T08:16:03.600 に答える
1

次のページでパラメータ読み取り機能を使用することでそれを行うことができます。

about-us.htmlページ

<script language="javascript" type="text/javascript" src="jquery-1.8.2.js"></script>
<script language="javascript" type="text/javascript">
function getURLParameter(id) {
    return decodeURI(
        (RegExp(id + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
    );
}
$(document).ready(function () { 
    clickedUrl = getURLParameter('id');                 
    if(clickedUrl=='aboutus'){
        $(".selected").removeClass("selected");
        $('#aboutus').addClass("selected");
    }
});

</script>
<style type="text/css">
a.selected{color:red;}
</style>


<a id="home" href="home.html?id=home" class="tag-link selected" >home</a>
 <a id="aboutus" href="about-us.html?id=aboutus" class="tag-link" >about us</a>
 <a id="yus" href="why-us.html?id=yus" class="tag-link" >why-us</a>
于 2012-12-05T09:10:02.857 に答える
0

実際に/home.htmlにアクセスしているときに/home.htmlへのリンクを赤にしたいだけで、それ以外の場合は、現在のURLを解析するだけです。

var selectedLink = location.href.replace(/http:\/\/[^\/]+\//i,'/');
$('a[href="' + selectedLink + '"]').addClass('selected');

リンクパスを絶対にするか、置換を変更して、次のように最後のスラッシュの前にすべてを切り落とす必要があります。

var selectedLink = location.href.replace(/http:\/\/.*\/([^\/]+)/i,"$1"); 
于 2012-12-05T08:40:28.847 に答える