jq实现点击导航栏中的任意一个跳转后被点击的定位到第一个

实现类似于这种效果:

思路:

1、通过获取点击部分的index然后作为参数加在a标签的url最后。

2、在跳转后的页面通过判断参数,来实现点击部分由原来的位置变换到首位。

代码:

html代码:

<div class="div1">
  <ul class="nav" id="nav">
	<li class="active"><a href="index1.html">首页</a></li>
	<li><a href="index2.html">对象</a></li>
	<li><a href="index3.html">场合</a></li>
  </ul>
</div>

js代码:

window.onload=function(){
				 //获取url中的参数
		         function getUrlParam(name) {
				      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
				      var r = window.location.search.substr(1).match(reg); //匹配目标参数
				      if (r != null) return unescape(r[2]); return null; //返回参数值
				    }
		        var index=getUrlParam("id");
		          $("#nav li:eq(0)").removeClass("active");
			    $("#nav li:eq("+index+")").prependTo($("#nav"));  
		//	    $("#nav li:eq(2)").remove();  
			 $("#nav li:eq(0)").addClass("active");
			    $("#nav li:eq(0)").siblings().removeClass("active");
	    	}
			$("#nav li").click(
				function(){
					//alert($(this).children("a").attr("href")+"?id="+$(this).index());  //在点击的a标签的url后面加参
					 window.open($(this).children("a").attr("href")+"?id="+$(this).index());
				});

  

 

 

posted @ 2017-06-12 17:53  Alyson.fu  阅读(1818)  评论(0编辑  收藏  举报