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（或其他名称），以指定相关span的ID。

<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");
   }
})

这样ANY（即使它是在执行上面的代码之后添加的）链接将运行一个函数，如果它有一个data-target属性，它将被用作jquery选择器来查找应该突出显示的元素。

<强> UPD：

改变以反映目标的行为（一次只应突出显示一个元素）David Fregoli指出

Answer 4

试试这个

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

的CSS：

    .changeTextColor {
         color: #4f8dd5;
    }

单击元素突出显示其他元素

4 个答案: