Question

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

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

这是我试图在here上执行的页面示例。请参阅右侧的功能列表。请帮助，我已经在这方面挣扎了很长一段时间，我的所有尝试都失败了。

Answer 1

如果您的网页足够一致，您可以使用以下内容：

<script>
$(document).ready(function(){
   $('ul.display-posts-listing li').children('a').filter(function(){
      return ($(this).html() == $('h1.entry-title').html())
   }).addClass('current');
});
</script>

我会将其放在header.php标记之前的</head>。

Answer 2

您可以编写一个脚本，从所有活动元素中删除该类，并将其添加到单击的那个：

<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应该可以正常工作。

尝试使用CSS当前类来定位列表项a以强制激活时

2 个答案: