使用 JavaScript 突出显示选定的 div答案

【问题标题】：Highlighting selected div with JavaScript使用 JavaScript 突出显示选定的 div
【发布时间】：2018-11-06 18:06:17
【问题描述】：

我想知道如何使用 jquery 或 JavaScript 来应用 onclick 事件来突出显示选定的 div 并突出显示其他 ..

我有一个动态的名称行，用户可以单击以查看选定的消息，当用户单击选定的名称时，名称将用边框突出显示...有没有一种简单的方法来实现这种事件而无需进行以下操作。

function swapme(foo) {
  buttons = new Array();
  buttons = document.getElementsByTagName('a');
  for (i = 0; i < buttons.length; i++) {
    if (buttons[i].className === 'active') buttons[i].className = 'inactive';
  }
  document.getElementById('button' + foo).className = 'active';
}

.inactive {
  background: #666;
  border: 1px solid #000;
  color: #FFF;
  padding: 12px
}

.active {
  background: #0F0;
  border: 1px solid #F00;
  color: #F00;
  padding: 12px
}

<html>

<head>
</head>

<body>
  <p>
    <a href="#" onclick="swapme('1'); return false;" class="inactive" id="button1">1</a>
    <a href="#" onclick="swapme('2'); return false;" class="inactive" id="button2">2</a>
    <a href="#" onclick="swapme('3'); return false;" class="inactive" id="button3">3</a>
    <a href="#" onclick="swapme('4'); return false;" class="inactive" id="button4">4</a>
    <a href="#" onclick="swapme('5'); return false;" class="inactive" id="button5">5</a>
  </p>

</body>

</html>

如果有简单的解决方法，请提出建议，例如切换事件或更改。

也可能无需通过数组循环..

【问题讨论】：

标签： javascript html

【解决方案1】：

试试这个：

let links = document.querySelectorAll('a');
   for (var i = 0; i < links.length; i++) {
    links[i].addEventListener('click', activateClass);
   }
function activateClass(e) {
for (var i = 0; i < links.length; i++) {
    links[i].classList.remove('active');
   }
    e.target.classList.add('active');
}

.active { background:#0F0 ; border:1px solid #F00 ; color:#F00 ; padding:12px }

<p>
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
</p>

【讨论】：

我会检查一下，谢谢你很多

【解决方案2】：

您可以使用document.querySelectorAll() 删除循环。

您可以实现以下内容：

点击其中一个名称时
获取当前活动
从当前活动中移除活动类
为点击的元素添加活动类

这样您就不需要遍历所有按钮。

请注意，您可以使用 addEventHandler 一次性添加所有处理程序，而不是在 html 中使用 onclick。这应该会使代码耦合度降低，并且更容易维护。

function swapme(event) {
  // Get current active element(s) 
  document.querySelectorAll('.active')
    // Remove active class
    .forEach(e => e.className = 'inactive');
  // And add the active class to the event target.
  event.target.className = 'active';
  // Prevent default link hanlding
  event.preventDefault();
}

document.querySelectorAll('#container > a')
  .forEach(button => button.addEventListener('click', swapme));

.inactive {
  background: #666;
  border: 1px solid #000;
  color: #FFF;
  padding: 12px
}

.active {
  background: #0F0;
  border: 1px solid #F00;
  color: #F00;
  padding: 12px
}

<html>

<head>
</head>

<body>
  <p id="container">
    <a href="#" class="inactive" id="button1">1</a>
    <a href="#" class="inactive" id="button2">2</a>
    <a href="#" class="inactive" id="button3">3</a>
    <a href="#" class="inactive" id="button4">4</a>
    <a href="#" class="inactive" id="button5">5</a>
  </p>

</body>

</html>

【讨论】：