javascript - 尝试使用 CSS 当前类定位列表项以在事件时强调

Question

我尝试了一些我在过去的问题中发现的东西，但不幸的是它没有帮助。我认为原因可能是它深深地隐藏在 CSS 类中，尽管我尝试使用 Chrome 的检查元素来准确找到它的位置，但我只是缺乏经验并且没有准确定位它。这是我的代码:

.multilanguage-widget.readmore ul.display-posts-listing li.listing-item a.current {
        font-weight: bold !important;
        }

这是我试图在 here 上做的页面示例.请参阅右侧的功能列表。请帮忙，我已经为此苦苦挣扎了很长一段时间，但我所有的尝试都失败了。

Answer 1

您可以编写一个脚本，从所有事件元素中删除类并将其添加到被单击的元素中:

<script type="text/javascript">
   function active(e) {
      $$('.current').each(function(i) {
         i.removeClassName('current');
      });
      e.addClassName('current');
   };
</script>

然后您可以从您的 onclick 事件中调用此函数:

<a class="title" href="http://lumistaging.designiscasual.com/biometrics/" onclick="active(this)">Biometric Authentication</a>
<a class="title" href="http://lumistaging.designiscasual.com/barcode/" onclick="active(this)">Barcode Authentication</a>

(等...)

我还没有测试过，但你的 CSS 应该可以正常工作。