javascript - 如何给事件div加下划线

Question

我正在尝试创建一个 jQuery 函数来在两个 div 之间切换，但我不知道如何使“事件”链接带有下划线。喜欢所选 div 的链接。

这是代码:

JS:

function toggleDiv(target) {

    var div = document.getElementById('wrapper').getElementsByTagName("div");

    if (target == 1) {
        div[0].style.display = 'none';
        div[1].style.display = 'block';
    } else {
        div[0].style.display = 'block';
        div[1].style.display = 'none';
    }

};

HTML:

<div id="button" onclick="toggleDiv(0)" style="padding-right: ;">
  <p align="center">PSYCHOLOGIE A PSYCHOTERAPIE</p>
</div>

<div id="button2" onclick="toggleDiv(1)" style="padding-left: ;">
  <p align="center">PSYCHOLOGIE PRÁCE</p>
</div>    

Answer 1

为什么不直接添加text-decoration:underline？

div[active].style.textDecoration = "underline";
div[inactive].style.textDecoration = "none";

将 active 和 inactive 替换为正确的索引。

<小时/>

我还将建议一个更动态的解决方案，因为您的解决方案非常僵化。试试这个:

$("div").click(function() {
  $("div").removeClass("active");
  $(this).addClass("active");
});

div {
  display: inline-block;
  background-color: #222222;
  border-radius: 2px;
  padding: 5px 10px;
  margin: 5px;
  color: #eeeeee;
  box-sizing: border-box;
  transition: all .2s;
}
div.active {
  text-decoration: underline;
  background-color: #2222ee;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Click</div>
<div>On</div>
<div>One</div>
<div>Of</div>
<div>These</div>