3

別の要素をクリックしたときに要素の属性を変更する方法はありますか? たとえば、次のようなリンクがあるこのアプローチを検討してください。

<a href="#100">Click me!</a>

そして、それに近い私はこれを持っています：

<span id="100" class="clickTarget">Important text</span>

そして、私のcssファイルには次のものがあります：

.clickTarget:target {
    color: #4f8dd5;
}

つまり、リンクがクリックされるたびに、Important textその色が変わります。このアプローチの問題点は、ページが少しでもスクロールされることです。ページをスクロールしないでこれを行う他の方法はありますか?

必要に応じて jQuery を使用できます。

4

4 に答える 4

3

これは複数のリンクで機能します。

CSS を次のように変更します。

.clickTarget.target {
    color: #4f8dd5;
}

リンクに共通のクラスを与えるlink

$('a.link').on('click', function() {
   $('.target').removeClass('target');
   var id = $(this).attr('href');
   $(id).addClass('target');
   return false;
});

http://jsfiddle.net/8S5mD/2/

于 2013-03-29T11:44:09.487 に答える
0

data-idリンクに属性(または他の名前) を追加してa、関連する の ID を指定しますspan。

<a href="#100" data-id="100">Click me!</a>

そして、ここにjavascriptがあります：

window.onload = function () {
    var alinks = document.getElementsByTagName('a');
    for (var i = 0; i < alinks.length; i++) {
        alinks[i].addEventListener('click', function () {
            var id = this.getAttribute('data-id');
            var span = document.getElementById(id);
            span.style.color = '#4f8dd5';
        });
    }
}

jsFiddleで例を参照してください

于 2013-03-29T11:44:56.663 に答える
0

次のようなものがうまくいくとします。

CSS:

   .target{
       color:#4f8dd5;
    }

HTML:

<a href="#" data-target="#100">click me<a>

JS:

$(document).on("click", "a", function(e) {
   if($(this).data("target")) {
     e.preventDefault(); //just to avoid # appearing in address after click.
     $(".target").removeClass("target");
     $($(this).data("target")).addClass("target");
   }
})

このように (上記のコードが実行された後に追加された場合でも) リンクは関数を実行し、data-target 属性がある場合は、強調表示する必要がある要素を見つけるための jquery セレクターとして使用されます。

更新:

David Fregoli が指摘したターゲットの動作を反映するように変更されました (一度に 1 つの要素のみを強調表示する必要があります)。

于 2013-03-29T11:45:03.410 に答える
0

これを試してみてください

    $("a").bind('click',function(e){
          if(!$("span.clickTarget").hasClass('changeTextColor')){
             $("span.clickTarget").addClass('changeTextColor');
           }
     });

CSS:

    .changeTextColor {
         color: #4f8dd5;
    }
于 2013-03-29T12:01:23.820 に答える