zoukankan      html  css  js  c++  java
  • 导航跳转后保持选中状态 jquery高亮当前选中菜单

    功能需求:
    今天在写一个站点需要用到在导航菜单点击链接跳转到新页面后,高亮当前菜单样式。
    简单的说,就是我点击导航菜单中的一个栏目,跳转到该栏目下,该栏目菜单也同时高亮(可以是背景色也可以是背景图片)

    解决方法:
    通过查看实例,我们需要用到JS中的jquery来实现这种效果,也可以通过CSS设置不同页面的a:hover实现效果,不过这显然是比较笨拙的方法。
    那么,如何用JS来实现效果呢,实现它所用的原理就是通过js中的location.href得到当前页面的地址,然后在与导航上的链接地址匹对,相同的就用一个css样式标记。此方法支持动态链接和静态链接多种形式。
    效果图:
    2

    代码如下:

    [javascript] view plain copy
     
      1. <script type=”text/javascript” src=”jquery.min.js”></script>  
      2. <style>  
      3. .menu { padding:0; margin:0; list-style-type:none;}  
      4. .menu li { background:#FFD1A4; margin-right:1px; float:left; color:#fff; }  
      5. .menu li a { display:block; 80px; text-align:center; height:32px; line-height:32px; color:#fff; font-size:13px; text-decoration:none;}  
      6.   
      7. .cur{ background:#D96C00; font-weight:bold;}  
      8. </style>  
      9.   
      10. <ul class=”menu” id=”menu”>  
      11. <li><a href=”a.html”>首页</a></li>  
      12. <li><a href=”b.html”>SEO优化</a></li>  
      13. <li><a href=”c.html”>生活娱乐</a></li>  
      14. </ul>  
      15.   
      16. <script type=”text/javascript”>  
      17. var urlstr = location.href;  
      18. //alert((urlstr + ‘/’).indexOf($(this).attr(‘href’)));  
      19. var urlstatus=false;  
      20. $(“#menu a”).each(function () {  
      21. if ((urlstr + ‘/’).indexOf($(this).attr(‘href’)) > -1&&$(this).attr(‘href’)!=”) {  
      22. $(this).addClass(‘cur’); urlstatus = true;  
      23. else {  
      24. $(this).removeClass(‘cur’);  
      25. }  
      26. });  
      27. if (!urlstatus) {$(“#menu a”).eq(0).addClass(‘cur’); }  
      28. </script>  
      29. from https://blog.csdn.net/yusirxiaer/article/details/62216550
  • 相关阅读:
    ActiveReports 9实战教程(1): 手把手搭建环境Visual Studio 2013 社区版
    分享产品发布的10条经验
    Mobile first! Wijmo 5 + Ionic Framework之:Hello World!
    Java知识回顾 (14)网络编程
    Java知识回顾 (13)序列化
    idea下java项目的打包与使用
    Java知识回顾 (12) package
    Java知识回顾 (11) 异常处理
    创建表时 ORA-00955: 名称已由现有对象使用
    工作笔记—hibernate之QueryCriteria
  • 原文地址:https://www.cnblogs.com/shizhijie/p/9052054.html
Copyright © 2011-2022 走看看