菜单点击状态变化

html代码

 

<div id="navsite">
    <h5>Site navigation:</h5>
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">关于</a></li>
        <li><a href="#">档案</a></li>
        <li><a href="#">作品</a></li>
        <li><a href="#" id="current">演讲</a></li>
        <li><a href="#">联系</a></li>
    </ul>
</div>

 

css代码

 

#navsite h5 {display: none;}
    #navsite ul {padding: 3px 0;margin-left: 0;border-bottom: 1px solid #778;font: bold 12px Verdana, sans-serif;}
    #navsite ul li {list-style: none;margin: 0;display: inline;}
    #navsite ul li a {padding: 3px 0.5em;margin-left: 3px;border: 1px solid #778;border-bottom: none;background: #DDE;text-decoration: none;}
    #navsite ul li a:link {color: #448;}
    #navsite ul li a:visited {color: #667;}
    #navsite ul li a:link:hover, #navsite ul li a:visited:hover {color: #000;background: #AAE;border-color: #227;}
    #navsite ul li a#current {background: white; border-bottom: 1px solid white;}

 

js代码（引入jquery）

 

$(document).ready(function() {
    var as = $("ul>li>a");
    as.click(function(){
       as.removeAttr("id");
       $(this).attr("id","current");
    });
});