jquery - 根据各自点击的元素突出显示 div

Question

我有五个 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'});

});

停留在这一点上，当我单击另一个链接时，我想取消突出显示前一个框，反之亦然。

Answer 1

你错过了这个#标志，请注意如果页面的文档类型不是 HTML5，id名称必须以字母 AZ 或 az 开头。

$(".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'});
});

演示

Answer 2

嘿，看这里： http: //jsfiddle.net/gehZ8/ 切换版本在这里 http://jsfiddle.net/gehZ8/1/

请注意您的 id as number，您可以这样做var id = $(this).attr('id').replace(/a/, '');会从字符串中获取最后一个数字，然后将其添加到您的 div 逻辑中，您可以随意玩耍:)

live如果您使用的是最新的 Jquery 使用.on事件，也可以代替。

希望这可以帮助，B-)

代码

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

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


    });
});

Answer 3

如果您每次都突出显示并使用相同的颜色，则单击时应用/删除类会更容易。

CSS

.highlight{
  background-color: red;
}

jQuery

$('.light').live('click', function(){
  var id = $(this).attr('id');
  $('[id^=box]').removeClass('highlight');
  $('#box'+id).addClass('highlight');
});

Answer 4

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 了解更多精彩内容

如果要验证href=""链接的 HTML 使用属性，并且要防止默认单击行为，请使用 jQuery e.preventDefault()。

我使用的.on()方法是 jQuery 1.7+.live()已弃用。