简单的jquery左侧导航栏和页面选中

 先上效果

css

<style type="text/css">
.side_nav { width:217px; float:left}
.side_nav .n1 { height:42px; padding-left:15px; font-size:14px; color:#fff; line-height:42px; border-top:#6bc5f8 1px solid; border-bottom:#40a1d8 1px solid; background:#51b8f2  no-repeat 191px -30px; display:block}
.side_nav .n1:hover, .side_nav .n1.active { border-top:#9176c5 1px solid; border-bottom:#9f81d8 1px solid; background-color:#967acc}
.side_nav .n1.active { background-position:192px 18px}
.side_nav .sec { display:none}
.side_nav .sec a { height:34px; padding-left:45px; color:#54667a; line-height:34px; border-top:#f0eef0 1px solid; border-bottom:#c9c6ca 1px solid; background:#E8ECEF; display:block}
.side_nav .sec.active { display:block}
.side_nav .sec a:hover, .side_nav .sec a.active { color:#fff; border-top:#9176c5 1px solid; background:#b8a1e3}

.d_m1 { margin-left:235px; position:relative}
.dec_m { margin-top:15px}
.i_sums { margin-left:-18px; overflow:hidden}
.i_sums .dec_box{ width:135px; height:82px; margin-left:18px; padding:20px 20px 0 0; text-align:right; float:left; background-image:url(../../img/ta/icon_sums.png); background-repeat:no-repeat}

.g_edit_sum { height:84px; padding-left:40px; border:#e2e2e2 1px solid; border-bottom:0; background:#f8f8f8; position:relative}

.g_edit_sum.sigle { height:54px; padding:0 30px; line-height:54px; font-size:20px;}
.dec_box2 { border:#bebebe 1px solid; background:#fff}
.portocol { width:780px; height:400px; margin:25px auto 0; padding:10px 30px; line-height:20px; border:#c4e4b7 1px solid; background:#f9f9f9;}
.portocol h2 { margin-bottom:10px; font-size:20px; text-align:center}
.portocol h3 { margin-bottom:10px; font-size:16px; text-align:left;color:red}
.portocol p { margin-bottom:1em; font-size:14px; line-height:20px; text-indent:2em}

</style>

 html

<div class="side_nav">
		<a class="n1">游客中心</a>
		<div class="sec active">
			<a href="/index.do?type=help&secType=qs&templetPath=qingsong.html#1">轻松成为旅游专家</a>
			<a href="/index.do?type=help&secType=fw&templetPath=fuwu.html#2">游客保障服务</a>
			<a href="/index.do?type=help&secType=dy&templetPath=dingyue.html#3">订阅游您优惠信息</a>
		</div>
		<a class="n1">为您答疑</a>
		<div class="sec active">
			<a href="/index.do?type=help&secType=bx&templetPath=baoxian.html#4">旅游保险种类</a>
			<a href="/index.do?type=help&secType=tk&templetPath=tuikuan.html#5">退款问题解答</a>
			<a href="/index.do?type=help&secType=wt&templetPath=wenti.html#6">旅行常见问题</a>
		</div>
		<a class="n1">预订帮助</a>
		<div class="sec active">
			<a href="/index.do?type=help&secType=yd&templetPath=yuding.html#7">如何预订旅游产品</a>
			<a href="/index.do?type=help&secType=pay&templetPath=pay.html#8">支付方式与发票</a>
			<a href="/index.do?type=help&secType=ht&templetPath=hetong.html#9">签署旅游合同</a>
		</div>
		<a class="n1">企业服务</a>
		<div class="sec active">
			<a href="/index.do?type=help&secType=rz&templetPath=ruzhu.html#10">旅行社入驻</a>
			<a href="/index.do?type=help&secType=ty&templetPath=tongye.html#11">旅游同业社区</a>
			<a href="/index.do?type=help&secType=yy&templetPath=yingyong.html#12">应用中心</a>
		</div>
</div>

 js处理

<script type="text/javascript">
//怎么为左侧加选中标示
$(function(){
	var url=document.location.href;//获取地址栏
	var menuId= url.split('#')[1];//获取#号后的数字
	if(menuId==null){
		menuId=1;
	}
	var num=0;
	$(".sec").find("a").each(function(){//获取所有.sec下的a元素，循环
		num++;
		if(num==menuId)
		{
			$(this).addClass("active");
			$(this).parent().prev().addClass("active");//当前对象的父元素的前一个同级元素 
		}
	});

	});
</script>