Question

我正在尝试突出显示当前菜单项，我搜索了各种选址以寻找解决方案，但我似乎无法使其正常工作。我希望你能帮帮我！我现在有这个：

   <div class="menu">
    <ul class="highlight">

            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="work.html">Work</a></li>
            <li><a href="contact.html">Contact</a></li>

    </ul>
</div>


.menu a{
  background-color:  #F2F2F2;   
  color: black;
  font-size: 15px;
  font-weight: bold;
  padding: 10px 10px;

  }

 .active {
color: black;
}

.menu  li {
display: inline;
opacity: 0.5;

}
.menu li:hover {
opacity: 1;
}

我知道我必须将类.active添加到菜单中，只有我尝试.menu li继续覆盖它。我真的不知道现在该做什么。

Answer 1

你可以尝试两件事： 1.在.mennu li之后把css放到.active。 2.在.active类中使用！important。例如。 .active {color：black！important;}

这可以解决您的问题。

如果问题仍然存在，请创建问题的jsfiddle并发送回链接。

Answer 2

HTML可能如下所示：

  <div class="menu">
    <ul>
      <li><a href="index.html">Home</a></li>
      <li class="active"><a href="about.html">About</a></li>
      <li><a href="work.html">Work</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </div>

CSS看起来像这样：

.menu li a {   
  color: black;
  font-size: 15px;
  font-weight: bold;
}

.menu li.active a {
  color: red;
}

.menu li a:hover {
  color: blue;
}

这是演示代码的小提琴：http://jsfiddle.net/e01mvmgz/

Answer 3

在jquery中

<script type="text/javascript">
        jQuery(document).ready(function($){
            // Get current url
            // Select an a element that has the matching href and apply a class of 'active'. Also prepend a - to the content of the link
            var url = window.location.href;
            $('.menu a[href="'+url+'"]').addClass('current_page_item');
        });
    </script>

Answer 4

如果您有一个更改标签而不重定向到新页面的菜单，您可以通过jQuery添加活动类

jQuery的：

$('.menu a').click(function(event){
    event.preventDefault();
    $('.menu a').removeClass('active')
    $(this).addClass('active');
});

CSS：

.menu a.active {
    color: red;
}

或者您只需将.active类添加到应该处于活动状态的新页面链接。

http://jsfiddle.net/1ruy1t2h/3/

突出显示当前菜单项

4 个答案: