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

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

代码如下：

    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; width:80px; text-align:center; height:32px; line-height:32px; color:#fff; font-size:13px; text-decoration:none;}
    6. .cur{ background:#D96C00; font-weight:bold;}
    7. </style>
    8. <ul class=”menu” id=”menu”>
    9. <li><a href=”a.html”>首页</a></li>
    10. <li><a href=”b.html”>SEO优化</a></li>
    11. <li><a href=”c.html”>生活娱乐</a></li>
    12. </ul>
    13. <script type=”text/javascript”>
    14. var urlstr = location.href;
    15. //alert((urlstr + ‘/’).indexOf($(this).attr(‘href’)));
    16. var urlstatus=false;
    17. $(“#menu a”).each(function () {
    18. if ((urlstr + ‘/’).indexOf($(this).attr(‘href’)) > -1&&$(this).attr(‘href’)!=”) {
    19. $(this).addClass(‘cur’); urlstatus = true;
    20. } else {
    21. $(this).removeClass(‘cur’);
    22. }
    23. });
    24. if (!urlstatus) {$(“#menu a”).eq(0).addClass(‘cur’); }
    25. </script>
    26. from https://blog.csdn.net/yusirxiaer/article/details/62216550

最新文章

  1. vs安装后当切换到图形设计界面的时候自动弹出“正在准备安装的提升”,然后程序处于假死状态
  2. 「LINUX资料」Samba服务器（二）
  3. Scale和Resolution的含义及转换算法
  4. Java集合框架源码剖析：LinkedHashSet 和 LinkedHashMap
  5. .NET 中使用 HttpWebResponse 时 Cookie 的读取
  6. 九度OnlineJudge之1032：ZOJ
  7. HDU 5573 Binary Tree（找规律）
  8. hihocoder 1015题
  9. bzoj4326 运输计划
  10. DaemonSet 典型应用场景 - 每天5分钟玩转 Docker 容器技术（129）
  11. react-native-upgrade-android
  12. #Leetcode# 997. Find the Town Judge
  13. React（四）组件生命周期
  14. mysql 实现 sqlserver的row_number over() 方法
  15. leetcode136只出现一次的数字
  16. [DUBBO] Unexpected error occur at send statistic, cause: Forbid consumer 192.168.3.151 access servic
  17. webpack简单修改版本号(单页面)
  18. mysql索引hash索引和b-tree索引的区别
  19. Redis Server installation FAQs
  20. python的多继承关系

热门文章

  1. 一款纯css3实现的鼠标经过按钮特效
  2. 怎样使GridView中满足某个条件的行可编辑，其余行不可编辑？
  3. mybatis深入学习
  4. DRAM 各项基本参数记录
  5. fullcalendar案例一&lt;原&gt;
  6. SpringMVC 利用AbstractRoutingDataSource实现动态数据源切换
  7. uboot中DEBUG定义
  8. KafkaStream实现wordcount
  9. Ubuntu14.04使用DEB安装Mysql5.7
  10. hdu2896 病毒侵袭 AC自动机入门题 N(N &lt;= 500)个长度不大于200的模式串(保证所有的模式串都不相同)， M(M &lt;= 1000)个长度不大于10000的待匹配串，问待匹配串中有哪几个模式串，