1

私は5つのdivを持っています

<div  id="box1">content 1</div>
<div  id="box2">content 2</div>
<div  id="box3">content 3</div>
<div  id="box4">content 4</div>
<div  id="box5">content 5</div>

特定のリンクをクリックすると、それに応じて強調表示されるそれぞれ

<a class="light" id="1">link 1</a>
<a class="light" id="2">link 2</a>
<a class="light" id="3">link 3</a>
<a class="light" id="4">link 4</a>
<a class="light" id="5">link 5</a>

これは私のjqueryです

$(".light").live("click", function(){
var id = $(this).attr('id');
$("box"+id).css({'background':'red'});

});

この時点で立ち往生しています。別のリンクをクリックしたときに前のボックスのハイライトを解除したいのですが、その逆も同様です。

4

4 に答える 4

4

ページの#doctype が HTML5 でない場合、id名前は A ～ Z または a ～ z の文字で始まる必要があることに注意してください。

$(".light").live("click", function(){ // you can also use `on()` instead of `live()` which is deprecated
    var id = this.id;
    $('div[id^="box"]').css({'background':'none'})
    $("#box"+id).css({'background':'red'});
});

デモ

于 2012-07-08T22:58:00.720 に答える
1

ここを参照してください: http://jsfiddle.net/gehZ8/ トグル バージョンはこちら http://jsfiddle.net/gehZ8/1/

Plz は id を持っていることに注意してnumberください。これを行うvar id = $(this).attr('id').replace(/a/, '');と、文字列から最後の数字が取得され、それが div ロジックに追加されます。残りは自由に遊んでください。:)

また、最新の Jquery 使用イベントliveを使用している場合の代わりに。.on

お役に立てれば、B-)

コード

$(document).ready(function() {
    $(".light").click(function() {
        var id = $(this).attr('id').replace(/a/, '');

        $("#box" + id).css({
            'background': 'red'
        });


    });
});
于 2012-07-08T23:03:09.250 に答える
0

毎回同じ色を強調表示して使用している場合は、クリックしてクラスを適用/削除する方が簡単です。

CSS

.highlight{
  background-color: red;
}

jQuery

$('.light').live('click', function(){
  var id = $(this).attr('id');
  $('[id^=box]').removeClass('highlight');
  $('#box'+id).addClass('highlight');
});
于 2012-07-08T23:01:09.900 に答える
0

jsBin デモ

ID周りにあるものはすべて必要ありません。ちょうどクラス:

<a href="#" class="light">link 1</a>
<div class="box">content 1</div>

indexクリックされたリンクの を取得します。

$("a.light").on("click", function(e){
    e.preventDefault();
    var thisIndex = $(this).index();
  $('.box').eq(thisIndex).css({background:'red'}).siblings().css({background:'none'});
});

以前は、最初に ;を使用して、他のすべてのボックスを (背景を元に戻すために).eq()同じインデックスを付けてターゲットにしていました。.box.siblings()

DOCS を読んで、さらに驚くべきことを見つけてください

リンクの HTML use 属性を検証したい場合はhref=""、デフォルトのクリック動作を防ぐために jQuery を使用しますe.preventDefault()。

.on()jQuery 1.7以降.live()は廃止されたため、このメソッドを使用しました。

于 2012-07-08T23:17:08.640 に答える