导航中点击任一个li时能切换到相应页面并有滑动门

 

<html>

<head>

//css部分

<style type="text/css">

#navWrap{ width:100%;height:40px; background:#161a20; font-size:14px;margin:0 auto;}

.nav{ width:1038px;height:40px; margin:0 auto;background:#161a20;}
.nav li{ width:90px;float:left; line-height:40px; margin-right:10px; text-align:center;}
.nav li:last-child{ margin-right:0;}
.nav li a{ width:70px; color:#fff; font-weight:700; text-decoration: none;}
.nav li:hover,.nav li.active{ background:#e38b3c; text-decoration: none; }

</style>

//js部分

<script type="text/javascript">
$(function(){

$("#navWrap li").each(function(i){

if($(this).index() == $("#colIndex").val()){
$(this).addClass("active");
} else{
$(this).removeClass("active");
}
});
})
</script>

</head>

<div id="navWrap">
<div class="nav">
<ul>
<li class="index"><a href="<c:url value='/index.jsp' />">首页</a></li>
<li><a href="<c:url value='/carsearch_carsearch.html' />">二手车</a></li>
<li><a href="<c:url value='/sellCar_add.html' />">卖车</a></li>
<li><a href="<c:url value='/buyinfo_carsearch.html' />">求购信息</a></li>
<li><a href="<c:url value='/dealer_infoList.html' />">经销商</a></li>
<li><a href="<c:url value='/ask_infoList.html' />">二手车咨询</a></li>
<li><a href="<c:url value='/authen/index.jsp' />">认证二手车</a></li>
<li><a href="<c:url value='/carVideo_infoList.html' />">汽车视频</a></li>
<li><a href="http://bbs.jipinauto.com/" target="_blank">车友吧</a></li>
</ul>
</div>
</div>

<%@ include file="footer.jsp" %>
<input type="hidden" id="colIndex" value="0"/> //首页（注意：在每个页面的</body>上面部分加上<input type="hidden" id="colIndex" value="1"/> ，value值由0开始，随导航li的多少相应增加）
</body>
</html>

posted @ 2014-06-11 14:18  photoshop爱好者  阅读(81)  评论(0)    收藏  举报