给网页导航条中的节目动态添加样式

主要效果如图：首页、八卦娱乐.

主要代码实现：

1、主页

.menu{height:35px;line-height:35px;background:#ea4740; font-size:1.2em; font-family:"微软雅黑";}
.menu ul li{ float:left;}.menu ul li a{padding:0 10px;color:#fff; display:block;height:35px;}.menu ul li a:hover,.menu ul li a.cur{background:#d71410;}

function topByIndex(index) {
	$(".menu li a").removeClass("cur");
	$(".menu li a").eq(index).addClass("cur").siblings();
};

注释：导航条的代码一般都是抽出来的所以以下这段代码是公共的。

 <div id="overflow" >          
    <div class="menu " >
        <ul> 
	       <li><a href="#“>首页</a></li> 

	       <li><a href="#">电视剧</a></li>

	       <li><a href="#">最新电影</a></li>
	       <li><a href="#">新闻头条</a></li> 
	       <li><a href="#">八卦娱乐</a></li>
	       <li><a href="#">军事热门</a></li>
	       <li><a href="#">热门游戏</a></li>
        </ul>
   </div>
</div>

当点击八卦新闻时，a链接跳转到八卦新闻页面，在该页面写以下代码

<!-- 导航条 -->
<jsp:include page="引入以上公共代码（common.jsp）" flush="ture"></jsp:include>
<script type="text/javascript">
topByIndex(4); //这里是导航条li的下标
</script>