Question

我们遇到了问题。我们的网站上有一个顶级菜单，有css样式。问题是我们有按钮附加功能，只需打开和关闭设置的东西。但是我们不能使用“主动”css样式，因为此链接没有附加网址。但我们想要在按钮处于活动状态时更改它的颜色。

有人可以帮我们解决这个问题吗？

这是我们的菜单html：

<header>
<div class="container">
  <nav>
    <ul>
      <li><a href="javascript:void(0)" class="icon one" id="box_one">buton one</a></li>
      <li><a href="javascript:void(0)" class="icon two" id="box_two">button two</a></li>
    </ul>
  </nav>
</div>
</header>

这是触发功能，该部分正常工作。函数change（）在myFunction的函数中！

document.getElementById('box_two').addEventListener("click", myFunction);

单击按钮时应该处于活动状态的部分的Css样式，再次单击该按钮时应关闭该部分的Css样式：

#actieflink:active {
padding-right: 16px;
background-color: #004D0e;
border-right: 0;
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.7);
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.7);
}

我尝试了这个，但它对我不起作用

function change() {
document.getElementById("actieflink").className='active';
}

Answer 1

我认为您的问题是点击<a href="javascript:void(0)" class="icon one" id="box_one">buton one</a>它应该将类别名称'有效'添加到右边吗？

Answer 2

我可以看到几个问题。对于初学者：active不是类，并且您不能使用className属性设置活动类。然后有这个：actieflink：活跃。什么是actifelink？当你在css中使用它时，你告诉浏览器寻找actifelink类型的元素。它会尝试找到一个actifelink标签。如果要为元素添加活动类，则更改函数应如下所示：

function change() {
    document.getElementById("box_one").className += 'active';
}

或更抽象的方法

function change(elementId) {
    document.getElementById(elementId).className += 'active';
}

你的CSS应该是这样的：

.active {
  /* active state style here */
}

如果您希望所有处于活动状态的标签都有自己的css，您应该这样做：

a:active { 
   /* active state style here */
}

但是，您应该不使用className + =，因为这会使类名称难以切换。还有其他选择。 jQuery的toggleClass，addClass和removeClass方法都会很棒。 jQuery class atribute

另一个选择是使用Element.classList方法。但这可能需要额外的努力才能支持旧浏览器。

Answer 3

I have made an example here. 
http://codepen.io/anon/pen/dPRPJJ
Clicking on a link set it to active mode. 
clicking it again turns of active mode.

将css按钮更改为css激活而不链接

3 个答案: