Question

我有一个包含以下内容的HTML文件：

<span id="id1"> text 1</span>
<span id="id2"> text 2</span>
<span id="id3"> text 3</span>
<a class="mark" href="#id1">mark text 1</a> 
<a class="mark" href="#id2">mark text 2</a> 
<a class="mark" href="#id3">mark text 3</a>

如果我点击其中一个<a>，我希望相应的跨度将其文字颜色更改为红色，并将所有其他文字颜色设置为黑色，因为它们只是最后点击链接使其目标显示为红色。

这是这样做的方法：

$("a.mark").on('click', function(e) {
    $("a.mark").attr( 'href').css('color', 'black') ;
    $(this).attr('href').css( 'color', 'red') ; 
    }
);

Answer 1

有一个内置的css选择器:target，可以完成你尝试用javascript做的事情。

http://css-tricks.com/on-target/

span:target{color:red}

:target将选择url中哈希指定的任何ID，因此：/index.html#span1将定位id span1

Answer 2

这是你想要的：

JsFiddle： http://jsfiddle.net/eGMqh/

<强> HTML：

<span id="id1"> text 1</span>

<span id="id2"> text 2</span>

<span id="id3"> text 3</span>

<a class="mark" href="#id1">mark text 1</a> 
<a class="mark" href="#id2">mark text 2</a> 
<a class="mark" href="#id3">mark text 3</a>

<强> JavaScript的：

$(function () {
    // Handler for .ready() called.
    $("a.mark").on('click', function (e) {
        $("span").css("color", "black");
        $($(this).attr("href")).css('color', 'red');
    });

});

Answer 3

~~关闭，只需删除.attr('href')：~~

$("a.mark").on('click', function (e) { $("a.mark").css('color', 'black'); $(this).css('color', 'red'); });

<击>的 jsFiddle example

如果要更改量程颜色，请使用：

$("a.mark").on('click', function (e) { $("span").css('color', 'black'); $($(this).attr('href')).css('color', 'red'); });

<强> jsFiddle example

Answer 4

关闭。

$("a.mark").on('click', function(e) {
  $("a.mark").each(
    function() {
      $($(this).attr('href')).css('color', 'black') ;
    }
  );

  $($(this).attr('href')).css( 'color', 'red') ; 
});

我们从每个href拉出a.mark，然后检索该元素，将其颜色设置为黑色（考虑使用类而不是直接颜色样式，BTW）。

然后，我们获取的href属性点击的元素，并将元素的颜色设置为red。

示例：http://codepen.io/paulroub/pen/GhsJv

Answer 5

你很亲密：

这对我有用......

$("a.mark").on('click', function(e) {
    $("a.mark").css('color', 'black') ;
    $(this).css( 'color', 'red') ; 
    }
);

标记链接的目标

5 个答案: