JS怎样实现静态页面跳转的高亮显示?

发布时间:2018-09-05 16:17:47

首先页面的DIV 是这样写的

<div class="aboutLeft" style="margin-left: 0px; height: 324px;">           

            <ul class="aboutLeftNav">

              <li><a href="/Service/">注册会员</a></li>

              <li><a href="/Service/Month.html">月会员</a></li>

              <li><a href="/Service/Year.html">年会员</a></li>

              <li><a href="/Service/SVIP.html">SVIP</a></li>              

              <li><a href="/Service/Cooperation.html">商务机构合作</a></li>

      <li><a href="/Service/Join.html">私人定制</a></li> 

            </ul>         

</div>

JS代码:

<script type="text/javascript">

$(function(){

var href=''+window.location+'';

href=href.toLowerCase()

if(href.indexOf("html")>0&&href.indexOf("index")>0){

$(".aboutLeftNav li").eq(0).addClass("currentClass")

}

if(href.indexOf("html")==-1&&href.indexOf("index")==-1){

$(".aboutLeftNav li").eq(0).addClass("currentClass")

}

if(href.indexOf("month")!=-1){

$(".aboutLeftNav li").eq(1).addClass("currentClass")

}

if(href.indexOf("half")!=-1){

$(".aboutLeftNav li").eq(2).addClass("currentClass")

}

if(href.indexOf("year")!=-1){

$(".aboutLeftNav li").eq(3).addClass("currentClass")

}

if(href.indexOf("svip")!=-1){

$(".aboutLeftNav li").eq(4).addClass("currentClass")

}

if(href.indexOf("custom")!=-1){

$(".aboutLeftNav li").eq(5).addClass("currentClass")

}

if(href.indexOf("cooperation")!=-1){

$(".aboutLeftNav li").eq(6).addClass("currentClass")

}

if(href.indexOf("join")!=-1){

$(".aboutLeftNav li").eq(7).addClass("currentClass")

}

if(href.indexOf("app")!=-1){

$(".aboutLeftNav li").eq(8).addClass("currentClass")

}

})

</script>

这种页面静态JS主要是通过href获取到的当前url,通过判断url里的链接来改变css,这样就可以做到

静态页面跳转的高亮显示了。

远近互联技术-刘 整理发布,希望能对同是技术的你有所帮助。

远近互联专业提供网站建设、APP开发、网站优化、外贸网站SEO、微信运营的品牌整合营销服务,让客户通过网络品牌建立与网络传播提高业绩。

【相关推荐】