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()); });