Jquery之导航选中记住状态

最新推荐文章于 2023-06-09 10:06:27 发布

原创最新推荐文章于 2023-06-09 10:06:27 发布 · 1.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#Jquery #导航 #选中 #记住状态

WEB前端专栏收录该内容

114 篇文章

订阅专栏

本文介绍了一种使用jQuery实现网站导航栏当前页面选中状态的方法。通过匹配URL来为当前页面对应的导航项添加样式，确保用户能清晰地了解自己所处的位置。此方法适用于多个导航链接的情况。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQ之导航选中记住状态</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
 .current{background-color: #6289c3;}
</style>
</head>

<body>
<ul class="site-menu" id="siteMenu">
        <li><a href="http://www.test.com">首页</a></li>
        <li><a href="http://www.test.com/index.php?act=goods">商城</a></li>
        <li><a href="http://www.test.com/index.php?act=article">文章</a></li>
    </ul>
</body>
<!--导航选中状态切换-->
<script type="text/javascript">
  var urlstr = location.href;
  var urlstatus=false;
  $("#siteMenu li a").each(function () {
 
    if ((urlstr + '/').indexOf($(this).attr('href')) > -1&&$(this).attr('href')!='') {
      $(this).addClass('current');
  urlstatus = true;
    } else {
      $(this).removeClass('current');
    }
if($("#siteMenu li a.current").length>1){
$("#siteMenu li a").eq(0).removeClass('current');
}
  });
  if (!urlstatus) {
 $("#siteMenu li a").eq(0).addClass('current'); 
  }
</script>
<!--导航选中状态切换-->
</html>