javascript - 单击一个元素突出显示其他元素

Question

单击另一个元素时，有什么方法可以更改元素的属性？例如，考虑这种方法，我有这样的链接：

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

然后靠近它我有这个：

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

然后在我的css文件上我有这个：

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

这意味着每当单击链接时，都会Important text更改其颜色。这种方法的问题是页面也会滚动，即使只是一点点。还有其他不滚动页面的方法吗？

如果您认为合适，您可以使用 jQuery。

Answer 1

这将适用于多个链接：

将您的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/

Answer 2

向您的链接添加一个属性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上的示例

Answer 3

假设这样的事情应该适合你：

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 指出的目标行为（一次只能突出显示一个元素）

Answer 4

试试这个

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

CSS：

    .changeTextColor {
         color: #4f8dd5;
    }