如何在 html 中自定义 onmouseover 属性？

debugcn 发表于 Dev

洛洛

我正在尝试自定义标签。当标签处于活动状态时，我希望它有标题下划线。我不知道为什么，但我无法用 CSS 达到它，它必须需要一个我想不到的 css 语法。

所以，我在想也许用一些 css 属性自定义我的 html 代码？反正有没有将onmouseoverwith visited,hover和activemy <div>in html归因于？

这是我拥有的 HTML

<div class="container">
  <div class="tabcordion">
    <ul class="nav nav-pills nav-stacked col-lg-6 col-md-6 col-sm-6 col-xs-12">
      <li class="active"><a data-target=".KONTAKT">KONTAKT</a></li>
      <li><a data-target=".ÜBER_UNS">ÜBER UNS</a></li>
    </ul>
    <div class="tab-content col-lg-6 col-md-6 col-sm-6 col-xs-12">
      <div class="KONTAKT in active">My content #1.</div>
      <div class="ÜBER_UNS">My content #2.</div>
    </div>
  </div>
</div>

南方

纯JS解决方案：

给每个选项卡一个单独的类，在这个例子中 .option#
将每个设置为在其标题和内容下划线click。

document.querySelector('.option1').addEventListener('click', function() {
  //remove underline from any non selected tab title
  document.querySelector('.option2').classList.remove('underline');
  // underline clicked tab title
  this.classList.add('underline');
})
document.querySelector('.option2').addEventListener('click', function() {
  document.querySelector('.option1').classList.remove('underline');
  this.classList.add('underline');
})

.underline {
  text-decoration: underline;
}

<div class="container">
  <div class="tabcordion">
    <ul class="nav nav-pills nav-stacked col-lg-6 col-md-6 col-sm-6 col-xs-12">
      <li class="option1 active underline"><a data-target=".KONTAKT">KONTAKT</a></li>
      <li class="option2"><a data-target=".ÜBER_UNS">ÜBER UNS</a></li>
    </ul>
    <div class="tab-content col-lg-6 col-md-6 col-sm-6 col-xs-12">
      <div class="KONTAKT in active">My content #1.</div>
      <div class="ÜBER_UNS">My content #2.</div>
    </div>
  </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。