Question

我想创建一些链接按钮，在单击时更改彼此的css样式。我找到了一些关于如何做到这一点的教程，其中途如此小提琴所示;

<a id="btn1" class="btn" href="#" onclick="btn2.style.background='#007eff'; this.style.background='#9a3e01';">Button 1</a>
<br /><br />
<a id="btn2" class="btn" href="#" onclick="btn1.style.background='#007eff'; this.style.background='#9a3e01';">Button 2</a>

唯一的问题是，当点击链接并加载页面时，链接的CSS样式将重置为正常，但我希望它保持样式，直到按下另一个链接。

正如我想象的那样，我需要使用一些javascript来处理这种效果，但是，javascript并不是我在互联网上最强大的领域。

亲切的问候 Neros

Answer 1

你想要尝试的是使用jQuery，它是一个已经被预先定义的动作库。对于这种情况，您需要在.css（）部分中找到一些内容。 http://api.jquery.com/css/

您的代码看起来像这样

$('#btn1').on('click', function(e){
    e.preventDefault(); // In this case I am preventing the link from firing you do not need this if you want to trigger the link, also remove e from your function parameters
    $('#btn2').css('background-color': 'red');
});

Answer 2

您可以将JavaScript与JQuery一起使用（比纯JavaScript更容易使用）。然后，您可以使用onclick事件调用函数。

HTML：

<a id="btn1" class="btn" href="#" onclick="changebtn2()">change color of the second button </a>
<a id="btn2" class="btn2" href="#">will change color if you click on the first button </a>

并确保您还在HTML中声明了JQuery库。

JavaScript的：

function changebtn2(){
   $("#btn2").removeClass("btn2"); //remove the old class
   $("#btn2").addClass("btn2change"); //add the new class with a different color
}

CSS：

.btn2{
   color: red;
}
.btn2change{
   color: green;
}

Answer 3

只需更换href =＆＃34;＃＆＃34;无效

<a href="javascript:void(0)">Button 1</a>

此void函数将阻止浏览器将任何查询作为请求传递。

Answer 4

我自己已经解决了这个问题..我已经在无序列表中使用了相同的功能，所以我只是在这个列表中添加了按钮。

单击时更改链接的Css

4 个答案: