jq实现点击导航栏中的任意一个跳转后被点击的定位到第一个
生活随笔
收集整理的這篇文章主要介紹了
jq实现点击导航栏中的任意一个跳转后被点击的定位到第一个
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
實(shí)現(xiàn)類似于這種效果:
思路:
1、通過獲取點(diǎn)擊部分的index然后作為參數(shù)加在a標(biāo)簽的url最后。
2、在跳轉(zhuǎn)后的頁(yè)面通過判斷參數(shù),來(lái)實(shí)現(xiàn)點(diǎn)擊部分由原來(lái)的位置變換到首位。
代碼:
html代碼:
<div class="div1"><ul class="nav" id="nav"><li class="active"><a href="index1.html">首頁(yè)</a></li><li><a href="index2.html">對(duì)象</a></li><li><a href="index3.html">場(chǎng)合</a></li></ul> </div>js代碼:
window.οnlοad=function(){//獲取url中的參數(shù)function getUrlParam(name) {var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //構(gòu)造一個(gè)含有目標(biāo)參數(shù)的正則表達(dá)式對(duì)象var r = window.location.search.substr(1).match(reg); //匹配目標(biāo)參數(shù)if (r != null) return unescape(r[2]); return null; //返回參數(shù)值}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()); //在點(diǎn)擊的a標(biāo)簽的url后面加參window.open($(this).children("a").attr("href")+"?id="+$(this).index());});
?
轉(zhuǎn)載于:https://www.cnblogs.com/formybestlife/p/6994233.html
與50位技術(shù)專家面對(duì)面20年技術(shù)見證,附贈(zèng)技術(shù)全景圖總結(jié)
以上是生活随笔為你收集整理的jq实现点击导航栏中的任意一个跳转后被点击的定位到第一个的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: SSM项目使用example查询时多次查
- 下一篇: JDBC的结果集