突出显示网页中的所选菜单项

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

Answer 2

<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>

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


 $(function(){

        $("a[href='#intro']").addClass("active");

    $("a.scroll ").click(function() {
        $("a.scroll").removeClass("active");
        $(this).addClass("active");
    });
});

FIDDLE DEMO

Answer 3

<强> DEMO

  

使用jQuery，您可以突出显示当前的活动菜单

<强> HTML：

<div class="menu">
<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>

</div>

<强>的CSS：

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

<强> JS：

$(".menu a").click(function() {
    $(".menu a.active").removeClass("active");
    $(this).addClass("active");
})

Answer 4

    $(document).ready(function(){

        $("a[href='#intro']").addClass("active");

// This will highlight Home when your page will be loaded first

//This will highlight link when ever you click

    $(".menu a").click(function() {
        $(".menu a").removeClass("active");
        $(this).addClass("active");
    });
});