改变链接颜色

Question

如果我有5个链接。当我点击第一个链接时，它必须改变为其他颜色，接下来如果我点击其他链接，先前链接的颜色应该回到默认状态，而这个链接的颜色应该改变。

代码：

$("table#menu tr > td a[href^='#']").click(function() { 
     $(this).toggleClass('class1'); / 
}); 

a.class1 { color:#000000; } 

<table id="menu"> 
<tr> 
   <td><a href="#" id="link1">qwerty</a></td> 
</tr> <tr> 
   <td><a href="#" id="link1">zyz</a></td> 
</tr> 
</table>

- user702208

---

你需要手动连接点击事件。如果您可以展示您的标记和要求，我们将能够更好地帮助您。 - neebz

@nEEbz：$("table#menu tr > td a[href^='#']").click(function() { $(this).toggleClass('class1'); / }); a.class1 { color:#000000; } <table id="menu"> <tr> <td><a href="#" id="link1">qwerty</a></td></tr> <tr> <td><a href="#" id="link1">zyz</a></td> </tr> </table> - user702208

toggleClass调用后，有一个正斜杠/。这是打字错误吗？ - Zirak

Answer 1

Classes.

css:

a {
    color: green;
}
a.special {
    color: orange;
}

javascript:

$('a').click(function(evt) {
    evt.preventDefault(); //don't follow link
    //remove the special class from all links which already have it
    $('a.special').removeClass('special');
    //add the special classs to the clicked link
    $(this).addClass('special');
}

当然，您需要根据自己的HTML更改选择器。

实时示例：http://jsfiddle.net/KHjDr/

- Zirak

---

+1 鼓励使用类而非直接更改颜色。 - Dan Blows

Answer 2

这应该能回答你的问题： http://jsfiddle.net/TL9rh/ HTML

<div id="links">
    <a href="#">link1</a>
    <a href="#">link2</a>
    <a href="#">link3</a>
    <a href="#">link4</a>
    <a href="#">link5</a>
</div>

javascript

$(document).ready(function(){
    $('#links a').click(function(){
        $(this).addClass('selected');
        $(this).siblings().removeClass('selected');
    });
})

css

a {
    color: darkgreen;   
}


.selected {
     color: red;   
}

- netbrain

---

如果我有一个表格，每个单元格里面都带有链接，我该怎么做？ - user702208

你能否通过添加一些ID来更改你的样式，因为全局变量在这里会出现问题。 - user702208

Answer 3

如果包含您的链接的页面不刷新，您可以仅使用CSS实现刷新。 HTML

<a href="#">MyLink1</a>
<a href="#">MyLink2</a>
<a href="#">MyLink3</a>

CSS

a:link{color: blue;}
a:active{color: red;}

- Steven Ryssaert

Answer 4

正确的版本应该是针对jQuery：

$(document).ready(function(){
$('.win a').click(function(){
    $('.win a:first-child').removeClass('focused');
    $(this).addClass('focused');

});

})

以及HTML：

<li class="widget-title win"><a class="focused" href="#window1">Recent News</a></li>
<li class="widget-title win"><a href="#window2">Most Favorites</a></li>
<li class="widget-title win"><a  href="#window3">Top News</a></li>

- user2175069