Question

<div class="wrap">
  <div class="nav-wrap">
    <ul class="group" id="example-one">
      <li class="current_page_item"><a href="#">Home</a></li>
      <li><a href="#">Movies</a></li>
      <li><a href="#">EVENTS</a></li>
      <li><a href="#">Booking</a></li>
      <li><a href="#">Sign In</a></li> 
      <li><a href="#">Theatres</a></li>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>                                   
  </div>
</div>

上面给出的是我的navabar。我该怎么做才能突出显示导航栏中的选定项目？我应该使用任何jquery或类似的东西

Answer 1

此处，jquery不是必需的......您只需添加此css：

即可

a:hover{
    background-color:#aaa;
    color:white;
}
a:active{
    background-color:#000;
    color:white;
}

用你想要的任何颜色。

运行此 jsfiddle

请记住 - hover必须在active之前才能生效。 A reference here.

Answer 2

请尝试此

$('#example-one a').click(function(e) {
    $('#example-one a').removeClass('current_page_item');
    $(this).addClass('current_page_item');
});

DEMO

Answer 3

根据您希望它突出显示的情况，有多种方法可以实现，我相信这会帮助您：

<div class="wrap">
  <div class="nav-wrap">
    <ul class="group" id="example-one">
      <li class="active"><a href="#">Home</a></li>//current page
      <li><a href="#">Movies</a></li>
      <li><a href="#">EVENTS</a></li>
      <li><a href="#">Booking</a></li>
      <li><a href="#">Sign In</a></li> 
      <li><a href="#">Theatres</a></li>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Contact Us</a></li>
     </ul>                                   
  </div>
</div>

CSS：

.group a {
    background-color: #000;
}
.group a:hover {
    background-color: #fff;
}
.active a {
    background-color: #fff;
}

然后只需更改活动页面的list元素的class属性。

Answer 4

我认为你需要的是，

<强> HTML

<div class="wrap">
    <div class="nav-wrap">
        <ul class="group" id="example-one">
            <li class="current_page_item"><a href="#">Home</a></li>
            <li><a href="#">Movies</a></li>
            <li><a href="#" class="active">EVENTS</a></li>
            <li><a href="#">Booking</a></li>
            <li><a href="#">Sign In</a></li> 
            <li><a href="#">Theatres</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>                                   
    </div>
</div>

<强> CSS

.group .active { background-color: #000; }

取决于您的要求，在激活的项目（当前页面）上将active课程添加到li或a。

突出显示导航栏中的所选项目

4 个答案: