我喜欢这样的链接:

<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/

10-12 12:30
查看更多