Jquery之导航选中记住状态

关注

原创最新推荐文章于 2026-09-20 16:35:39 发布 1.8k 阅读 AI 写同款· GEO 优化 ›

jQuery实现的轻量手风琴导航菜单，支持多级点击滑动展开收起直接可用的jQuery手风琴导航菜单组件，点击父级菜单项即可平滑滑动展开或收起对应子菜单，支持无限层级嵌套。资源包内含完整运行环境：首页HTML文件（index.html）、独立CSS样式文件（zzsc.css及css目录）、必需的jQuery基础库（jquery1.42.min.js）和专用插件脚本（jquery.SuperSlide.2.1.1.js），以及清晰的使用说明文档（使用帮助.txt）。所有代码结构规范，JS与CSS完全分离，方便开发者快速替换主题色、调整动画时长或扩展点击回调逻辑。在Chro 阅读详情

<!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>

收录于