我喜欢这样的链接:
<a href="#" onclick="changeClass()">My Button</a>
和CSS样式:
.tree li a:hover, .tree li a:hover+ul li a {
background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
}
我的问题是如何将这种.tree样式更改为另一种样式?如果我再次单击该样式,将返回到开始样式?
最佳答案
可以使用普通的javascript完成,如下所示:
var id = 'myElementId';
var myClassName = " tree";
var d;
function changeClass() {
d = document.getElementById(id);
if (d.className == ' tree') {
d.className = d.className.replace(myClassName, "");
} else {
//d=document.getElementById('myElementId');
d.className = d.className.replace(myClassName, ""); // first remove the class name if that already exists
d.className = d.className + myClassName; // adding new class name
}
}
.tree {
background: #c8e4f8;
color: #000;
border: 1px solid #94a0b4;
}
<a id="myElementId" href="#" onclick="changeClass()">My Button</a>
现在在jQuery中,可以使用如下所示的切换来实现:
var id = 'myElementId';
var myClassName = " tree";
function changeClass() {
$('#' + id).toggleClass(myClassName);
}
.tree {
background: #c8e4f8;
color: #000;
border: 1px solid #94a0b4;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a id="myElementId" href="#" onclick="changeClass()">My Button</a>
关于javascript - 如何使用javascript更改css li样式?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/28567563/