html - 在网页中突出显示选定的菜单项

Question

我的菜单 html 看起来像:

<i class="icon-remove menu-close"></i>
<a class="scroll" href="#intro">Home</a>
<a class="scroll" href="#about">About</a>
<a class="scroll" href="#services">Services</a>
<a class="scroll" href="#team">Team</a>
<a class="scroll" href="#portfolio">Portfolio</a>
<a class="scroll" href="#contact">Contact</a>

CSS

 .menu a:hover 
 {
   background:#e9d319;
   color: #000;
  }

 .menu a.active
 {
 background:#e9d319;
 color: #000;
 }

我需要在查看页面时突出显示每个菜单。假设我正在查找必须突出显示的服务。

怎么做？

Answer 1

HTML

---

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li><a href="#">Home</a></li>
        <li class="active"><a href="#">profile</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
 </div>

CSS

---

ul
{
    list-style-type:none;
    width:500px;
}
li
{
 float:left;
    display:inline-block;
    text-align:center;
    width:100px;  
    
    background-color:#003366;
    padding:10px;
       
}
a
{
   color:white;
    text-decoration:none;
}
li.active {
    background-color:red;
    text-transform:uppercase;
   
}
li.active a{
    color:white;
    text-transform:uppercase;
   
}

JQuery:

---

$('li').on('click', function(){
   $('li').removeClass('active');
   $(this).toggleClass('active');
})

输出:

---

---

Fiddle Demo