将 css 按钮更改为没有链接的 css 活动

Change css button to css active without link

本文关键字：css 链接 活动 按钮      更新时间：2023-09-26

我们遇到了问题。我们的网站上有一个带有 css 样式的顶部菜单。问题是我们在按钮上附加了功能，可以简单地打开和关闭某些东西。但是我们不能使用"活动"css 样式，因为此链接没有附加 url。但是我们希望在按钮处于活动状态时更改按钮的颜色。

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

这是我们的菜单 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 样式，再次单击按钮时应关闭的部件：

#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';
}

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.
我认为

您的问题在于单击<a href="javascript:void(0)" class="icon one" id="box_one">buton one</a>它应该附加类名"活动"对吗？

我可以看到几个问题。对于初学者来说，：active 不是一个类，你不能使用 className 属性设置一个活动类。然后是这个：actieflink：active 。什么是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方法会做得很好。j查询类致敬

另一个选项是使用 Element.classList 方法。但这可能需要为旧版浏览器支持付出一些额外的努力。

相关文章：