单击某个元素以突出显示其他元素 [英] Click on an element highlights other element

问题描述

单击另一个元素时，是否可以更改一个元素的属性?例如，考虑这种方法，在我有这样的链接的地方:

Is there any way to change the attributes of an element when clicking on another element? For example, consider this approach where I have a link like so:

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

然后接近它，我有这个:

And then close to it I have this:

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

然后在我的css文件中有这个:

And then on my css file I have this:

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

这意味着只要单击链接，重要文本就会更改其颜色.这种方法的问题在于，即使只是一点也滚动了页面.还有其他方法可以使页面不滚动吗?

That means whenever the link is clicked, Important text changes its color. The problem with this approach is that the page is also scrolled even if only a bit. Is there any other way to do this that doesn't scroll the page?

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

You can use jQuery if you see fit.

推荐答案

这将与多个链接一起使用:

This will work with multiple links:

将CSS更改为:

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

为链接提供一个通用类，即 link

give your links a common class ie link

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

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

这篇关于单击某个元素以突出显示其他元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！