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名称必须以字母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'});
});

DEMO

Answer 2

嘿，请看：http://jsfiddle.net/gehZ8/ 这里有一个切换版 http://jsfiddle.net/gehZ8/1/

Plz请注意您的身份标识为number，您可以执行此操作var id = $(this).attr('id').replace(/a/, '');将从字符串中获取最后一个数字，然后将其添加到您的div逻辑中，休息随意玩:) 1}}

如果您使用最新的Jquery，请使用live事件代替.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 demo

你不需要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()定位所有其他框（撤消背景）;

Find out more amazing stuff reading the DOCS

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

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

根据相应的单击元素突出显示div

4 个答案:

jsBin demo