Question

我喜欢这样的链接：

<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风格改为另一种风格？如果我再次点击样式返回到开始样式？

Answer 1

可以在普通的javascript中完成，如下所示：

＆＃13;

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

＆＃13;

.tree {
  background: #c8e4f8;
  color: #000;
  border: 1px solid #94a0b4;
}

＆＃13;

<a id="myElementId" href="#" onclick="changeClass()">My Button</a>

＆＃13;

现在在jQuery中可以使用切换来实现，如下所示：

＆＃13;

var id = 'myElementId';
var myClassName = " tree";

function changeClass() {
  $('#' + id).toggleClass(myClassName);
}

＆＃13;

.tree {
  background: #c8e4f8;
  color: #000;
  border: 1px solid #94a0b4;
}

＆＃13;

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

＆＃13;

Answer 2

使用classList.toggle("className")切换课程。

var div = document.getElementById("myDiv");
div.classList.toggle("myClassToggle");

Answer 3

使用这个小的javascript函数：

function toggleClass(el, class1, class2) {
  if(new RegExp("\\b"+class1+"\\b").test(el.className)) {
    el.className = el.className.replace(new RegExp("\\b"+class1+"\\b",'g'),class2);
  } else {
    el.className = el.className.replace(new RegExp("\\b"+class2+"\\b",'g'),class1);
  }
}

a {
  display:block;
  padding:10px;
  color:white;
}
.myclass1 {
  background:red;
}
.myclass2 {
  background: green;
}

<a href="#" class="myclass1" onclick="toggleClass(this,'myclass1','myclass2')">My Button</a>

编辑：确保类名不在另一个单词

中

Answer 4

执行此操作的一种简单方法是创建另一个css类选择器，并在css文件中为其指定所需的样式，例如.my-tree。

.my-tree {
    color: red;
}

现在，当您单击锚点时，可以将此css类添加到树元素中。

var treeEl = document.getElementById("tree"); 

treeEl.className = treeEl.className + " my-tree":

同样，您也可以删除此css类。您可以在代码中使用变量作为标志，并用于添加/删除css类。

这样做的一个简单方法就是使用 jquery的toggleClass方法以无缝方式执行此操作。

Answer 5

只是把它扔出去 - 你可以用纯CSS做到：

[type=checkbox] {
  display:none;
}

/* This selects the div tag immediately following the checkbox */
[type=checkbox] + div {
  background:red;
  cursor:pointer;
}

/* The same selector, except this is active when the checkbox is checked */
[type=checkbox]:checked + div {
  background:blue;
  color:#fff;
}

<label>
  <input type="checkbox">
  <div>Change me!</div>
</label>

这打破了有效HTML的一些规则，但如果你只需要切换一些东西（而不关心验证或quirksmode），这个解决方案非常简单。如果你关心验证：

[type=checkbox] {
  display:none;
}

[type=checkbox]:checked + label {
  background:blue;
  color:#fff;
}

[type=checkbox] + label {
  background:red;
  display:block;
}

<input id="toggler" type="checkbox">
<label for="toggler">
  Change me!
</label>

只是要咀嚼的东西。

Answer 6

您可以使用jQuery

HTML：

<a href="#" id="myLink">My Button</a>

JS：

   $( "#myLink" ).click(function() {
     $( "#myLink" ).toggleClass("first");
     $( "#myLink" ).toggleClass("second");
  });

CSS：

.first {
    background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
}

.second {
    background: #000; color: #fff; border: 1px solid #94a0b4;
}

如何用javascript更改css li样式？

6 个答案: