Your's Working Fiddle

Question

在导航菜单上工作，但我的问题是当我在网站上按下时如何使菜单亮绿色，这样我就可以看到我在Dagvakt里面了？

鼠标悬停时，菜单只显示绿色，当该人在该网站时，该菜单也应亮起。 Jsfiddle：http://jsfiddle.net/EkLPG/

Html：

  <ul id="nav">
    <li><a href="#"><img src="images/home.png" /> Forside</a>
    </li>
    <li><a href="#"><span><img src="images/temperatur.png" /> Måling</span></a>
    </li>
    <li><a href="#"><span><img src="images/sol.png" /> Dagvakt</span></a>
    </li>
    <li><a href="#"><img src="images/kveld.png" /> Kveldsvakt</a>
    </li>
    <li><a href="#"><img src="images/vaske.png" /> Kontroll CM</a>
    </li>
    <li><a href="#"><img src="images/søk.png" /> Søk</a>
    </li>
    <li><a href="#"><img src="images/top2.png" /> Statistikk</a>
    </li>
    <li><a href="#"><img src="images/top3.png" /> Rapport</a>
    </li>
</ul>

的CSS

ul#nav {

    width: 1050px;
    float: right;
    font-family: Trebuchet MS, sans-serif;
    font-size: 0;
    padding: 5px 5px 5px 0;
    background: -moz-linear-gradient(#f5f5f5, #c4c4c4); /* FF 3.6+ */
    background: -ms-linear-gradient(#f5f5f5, #c4c4c4); /* IE10 */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #c4c4c4)); /* Safari 4+, Chrome 2+ */
    background: -webkit-linear-gradient(#f5f5f5, #c4c4c4); /* Safari 5.1+, Chrome 10+ */
    background: -o-linear-gradient(#f5f5f5, #c4c4c4); /* Opera 11.10 */
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#c4c4c4'); /* IE6 & IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#c4c4c4')"; /* IE8+ */
    background: linear-gradient(#F2F2F2, f5f5f5); /* the standard - Farge */
}
ul#nav, ul#nav ul {
    list-style: none;
    margin: 10px 0px 0px 0px;
}
ul#nav, ul#nav .subs {
    background-color: #444;
    border: 0px solid #454545; /* Border */
    border-radius: 9px;
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px;
}
ul#nav .subs {
    background-color: #fff;
    border: 2px solid #222;
    display: none;
    float: left;
    left: 0;
    padding: 0 6px 6px;
    position: absolute;
    top: 100%;
    width: 300px;
    border-radius: 7px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
}
ul#nav li:hover>* {
    display: block;
}
ul#nav li:hover {
    position: relative;
}
ul#nav ul .subs {
    left: 100%;
    position: absolute;
    top: 0;
}
ul#nav ul {
    padding: 0 5px 5px;
}
ul#nav .col {
    float: left;
    width: 50%;
}
ul#nav li {
    display: block;
    float: left;
    font-size: 0;
    white-space: nowrap;
}
ul#nav>li, ul#nav li {
    margin: 0 0 0 5px;
}
ul#nav ul>li {
    margin: 5px 0 0;
}
ul#nav a:active, ul#nav a:focus {
    outline-style: none;
}
ul#nav a {
    border-style: none;
    border-width: 0;
    color: #181818;
    cursor: pointer;
    display: block;
    font-size: 13px;
    font-weight: bold;
    padding: 8px 10px;
    text-align: left;
    text-decoration: none;
    text-shadow: #fff 0 1px 1px;
    vertical-align: middle;
}
ul#nav ul li {
    float: none;
    margin: 6px 0 0;
}
ul#nav ul a {
    background-color: #fff;
    border-color: #efefef;
    border-style: solid;
    border-width: 0 0 1px;
    color: #000;
    font-size: 11px;
    padding: 4px;
    text-align: left;
    text-decoration: none;
    text-shadow: #fff 0 0 0;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
}
ul#nav li:hover>a {
    border-style: none;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
    text-shadow: #181818 0 1px 1px;
}
ul#nav img {
    border: none;
    margin-right: 8px;
    vertical-align: middle;
}
ul#nav span {
    background-position: right center;
    background-repeat: no-repeat;
    display: block;
    overflow: visible;
    padding-right: 0;
}
ul#nav ul li:hover>a {
    border-color: #444;
    border-style: solid;
    color: #444;
    font-size: 11px;
    text-decoration: none;
    text-shadow: #fff 0 0 0;
}
ul#nav > li >a {
    background-color: transpa;
    height: 25px;
    line-height: 25px;
    border-radius: 11px;
    -moz-border-radius: 11px;
    -webkit-border-radius: 11px;
}
ul#nav > li:hover > a {
    background-color: #009900;
    line-height: 25px;
}

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');
})

<强>小提琴

Demo

当用户在该页面上时，导航栏会亮起

1 个答案:

Your's Working Fiddle