跳转页面导航选中效果(实时刷新的页面)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
    .nav { padding:0; margin:0; list-style-type:none;}
    .nav li { background:#eee; margin-right:1px; float:left; color:#fff; }
    .nav li a { display:block; width:80px; text-align:center; height:32px; line-height:32px; color:#fff; font-size:13px; text-decoration:none;}
    
    .active{ background:#000; font-weight:bold;}
</style>
    </head>
    <body>
        <script type="text/javascript" src="http://www.daixiaorui.com/Public/js/jquery.min.js"></script>

 
<ul class="nav" id="nav">
  <li><a href="a.html?a=1" >首页</a></li>
  <li><a href="a.html?a=2">社区</a></li>
  <li><a href="a.html?a=3">关于我们</a></li>
</ul>
 
<script type="text/javascript">
  var urlstr = location.href;
  //alert(urlstr);
  var urlstatus=false;
  $("#nav a").each(function () {
    if ((urlstr + '/').indexOf($(this).attr('href')) > -1&&$(this).attr('href')!='') {
      $(this).addClass('active'); urlstatus = true;
    } else {
      $(this).removeClass('active');
    }
  });
  if (!urlstatus) {$("#nav a").eq(0).addClass('active'); }
</script>
    </body>
</html>

猜你喜欢

转载自blog.csdn.net/leng0920/article/details/83659153
今日推荐