• 基于jquery 实现导航条高亮显示的两种方法

    本篇文章是基于jquery实现导航菜单高亮显示，当点击不同导航菜单实现当前点击的菜单是高亮的，有需要的朋友可以关注下本文

    实现原理：当选中当前元素时，给当前元素添加样式，同级元素移除样式。

    点击不同的导航菜单实现当前点击的菜单是高亮的,点击导航下面的某个分类,分类所属的导航也必须是高亮的,点击某一篇文章,文章所属的导航菜单也必须是高亮的.

    效果图如下：

     

    示例代码一：

    具体示例代码如下：

    1. html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. <title>导航条高亮显示title>
    6. <style>
    7. body,ul,ol,li,div,p{margin:0px;padding:0px;}
    8. ul{list-style-type:none;border:1px solid blue;background:#4f5b93;height:45px;}
    9. ul li{float:left;heihgt:45px;line-height:45px;width:100px;text-align:center;}
    10. ul li a:link,a:visited{color:#fff;text-decoration:none;}
    11. .act{background:#ff6600;}
    12. style>
    13. <script src="js/jquery.js">script>
    14. <script>
    15. $(function(){
    16. $('ul li').eq(0).addClass("act");
    17.  $('ul li').each(function(){
    18.   $(this).click(function(){
    19.     $(this).addClass("act").siblings().removeClass("act");
    20.    })
    21.  })
    22. })
    23. script>
    24. head>
    25. <body>
    26. <ul>
    27. <li><a href="/">首页a>li>
    28. <li><a href="/about">关于我们a>li>
    29. <li><a href="/NewsList">新闻动态a>li>
    30. <li><a href="/JiShu">技术支持a>li>
    31. ul>
    32. body>
    33. html>

    示例代码二：

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. 	<title>导航条高亮显示</title>
    6. </head>
    7. <body>
    8. <ul id="nav">
    9. 		<li><a href="index.html" rel="external nofollow" rel="external nofollow" >首页</a></li>
    10. 		<li><a href="1.html" rel="external nofollow" rel="external nofollow" >栏目一</a></li>
    11. 		<li><a href="2.html" rel="external nofollow" rel="external nofollow" >栏目二</a></li>
    12. 		<li><a href="3.html" rel="external nofollow" rel="external nofollow" >栏目三</a></li>
    13. 	</ul>
    14. <h1>栏目一</h1>
    15. </body>
    16. <script type="text/javascript" src="js/jquery-1.8.min.js"></script>
    17. <script type="text/javascript">
    18. 	var urlstr = location.href;
    19. 	console.log(urlstr+'/');
    20.   var urlstatus=false;
    21.   $("#nav a").each(function () { 
    22.     if ((urlstr + '/').indexOf($(this).attr('href')) > -1&&$(this).attr('href')!='') {
    23.      $(this).addClass('active'); urlstatus = true;
    24.     } else {
    25.      $(this).removeClass('active');
    26.     }
    27.    });
    28.   if (!urlstatus) {$("#nav a").eq(0).addClass('active'); }
    29. </script>
    30. </html>

    注意：

    1、 location.href 用于获取当前页面的url

    2、 当前页面应该保存为index.html

    3、 indexOf 用于检索当前url中是否存在a中对应的href

    4、 每个html中都拥有相同的导航结构

    5、 eq(index/-index) 获取当前链式操作中第N个JQuery对象，返回JQquery对象，当参数大于等于0时为正向选取，比如0代表第一个，1代表第二个。当参数为负数时为反向选取，比如-1代表倒数第一个。

    这个也能基本实现效果,但是如果在导航下如果有分类,如图.这样分类url和导航的url就不能匹配了,然后新闻的url和导航的url也不能匹配.所以还是有点扯淡.....那怎么办呢?

    所以我的思路是这样的

    既然url不一样,那就找导航-->分类-->新闻之间的关系了.他们的对应关系是一个导航下可能有多个分类,一个分类下可能有多篇新闻.那么逆向的来说,每一篇新闻或者分类都对应一个导航.那么在对应的的分类页面和新闻页面都定义一个变量就是导航标识.然后修改导航

  • 相关阅读:
    音频编解码，利用FAAC来实现AAC编码
    Spring Cloud Gateway 集成Sa-Token
    Vant可靠的移动端组件库
    设计原则之【开闭原则】
    QT的ui设计中改变样式表的用法
    高等代数（邱维声）课程笔记：目录
    SD-WAN技术：优化国内外服务器访问的关键
    gdb调试插件的安装——gef/gdbinit/peda（记录向）
    vue-router当中内置component标签(组件)的使用
    Python---ljust()--左对齐、rjust()--右对齐、center()--居中对齐
  • 原文地址：https://blog.csdn.net/lwf3115841/article/details/128048262