javascript - クリックされた タグのスタイルを設定するには?

Question

score 1 · Accepted Answer

以下をお試しください：

.navigation ul#topnav li a:visited{ 
    color:#824d97; 
    background-color:inherit; 
    background:url(../images/nav-hover-bg.png) repeat-x 0 0 !important; 
    border-left:5px solid #6c1b93 !important; 
    border-right:5px solid #6c1b93 !important; 
}

score 1 · Accepted Answer

そのためのjavascript/jQueryコードを作成します。

OnLoad / ready DOM

jQuery

$(".navigation ul#topnav li").click(function() {
     if($(this).hasClass("selected")) {
         $(this).removeClass("selected");
     } else {
         $(this).addClass("selected");
     } 
});

CSS

.navigation ul#topnav li.selected {
    background-color:#selectedcolor
}

score 1 · Accepted Answer

Jqueryを使用しているため、次のことができます。

$(function(){
    $('.navigation ul#topnav li a').hover(
      function(){
        //remove the active class from all links on mouseover
        $('.navigation ul#topnav li a').removeClass('.active');
      },
      function(){
        //add active class to current link on mouseout
        $(this).addClass('active');
      }
    );
});

...次に、アクティブなクラスのスタイルを css に追加します。

.navigation ul#topnav li a.active{
  /*your styles*/
}

score 1 · Accepted Answer

これにはjqueryを使用する必要があります。

$('.links').click(function(){
    $(this).addClass('clicked');
});

次に、クリックされたリンクのスタイルを設定します。

.clicked{
    color:red;
}

score 1 · Accepted Answer

3 番目の CSS セレクターを次のように更新します。

.navigation ul#topnav li a:hover, .navigation ul#topnav li a.selected {

...これらの設定は、<a>ホバーされているものと<a>「選択された」クラスの両方に適用されます。または、クリックしたリンクにホバースタイルのバリエーションを持たせたい場合は.navigation ul#topnav li a.selected {、別のエントリとして追加します。

次に、リンクがクリックされたときに JS コードで「選択した」クラスを追加し、他のクラスからクラスを削除します。

$("#topnav li a").click(function() {
    // whatever else you do on click, then

    $(this).addClass("selected");
    $("#topnav li a").not(this).removeClass("selected");
});

編集: そのコードを$(document).ready()ハンドラーまたはページの最後のスクリプトブロックに配置します。

実際のデモ: http://jsfiddle.net/VFJ7c/

注：メニューがAjaxを介してコンテンツをロードしているか、既存のコンテンツを表示および非表示にしていると想定していました（他の回答も想定していたと思います）。メニューにページ全体をリロードする標準リンクがある場合、これは機能せず、「選択された」クラスをサーバー側コードの適切なリンクに適用するか、代わりに DOM 対応でそれを行う必要があります。クリックで。

score 1 · Accepted Answer

選択した状態に新しいスタイルを追加することもできます:

    .navigation ul#topnav li a:selected{
     //Your Style Here
    }

score 1 · Accepted Answer

別のクラスを追加し、クリック時に要素に追加する必要があります。

JS

$('.navigation ul#topnav li a').click(function(){
    $(this).addClass('active');
});

CSS

.navigation ul#topnav li a.active{
        color:#824d97;
        background-color:inherit;
        background:url(../images/nav-hover-bg.png) repeat-x 0 0 !important;
        border-left:5px solid #6c1b93 !important;
        border-right:5px solid #6c1b93 !important;
    }

javascript - クリックされたタグのスタイルを設定するには?

7 に答える 7

Related

Reference