实现类似于这种效果:
思路:
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());
});