如何让导航条高亮显示

在web开发中会遇到这样一个问题：当你点击某一个导航时，就让他高亮显示，其他的默认。

可以用一下两种方法解决：

1，在每一个文件中都引入头部，然后为不同的链接添加样式

缺点：比较麻烦，如果要修改样式，每个文件都要修改

2，把头部提出来，用js判断url地址，然后给当前的url加上样式（用js控制的）

<div class="nav_nav" id="menu">
  <a href="/" class="active">公司首页</a>
  <a href="/product/product.php" >公司简介</a>
  <a href="/shop/map.php">雅酷地图</a><b></b>
  <a href="/shop/shop.php">合作商户</a>
  <a href="/shop/shop_search.php">商户搜索</a>
</div>

<script type="text/javascript">
//获取div下面所有的a标签（返回节点对象）
var myNav = document.getElementById("menu").getElementsByTagName("a");

//获取当前窗口的url
var myURL = document.location.href;

//循环div下面所有的链接，
   for(var i=1;i<myNav.length;i++){
   //获取每一个a标签的herf属性
  var links = myNav[i].getAttribute("href");
  var myURL = document.location.href;

//查看div下的链接是否包含当前窗口，如果存在，则给其添加样式
  if(myURL.indexOf(links) != -1){
    myNav[i].className="active";
    myNav[0].className="";
   }
}
</script>

这个很有用，以后会用到~！

如何让导航条高亮显示相关推荐

【2】Vue项目引用Element UI（饿了么框架）菜单导航条初期配置
首先要理解Vue项目加载顺序: index.html → main.js → App.vue → nav.json→ routes.js → page1.vue index.html建议加入样式 &l ...
Bootstrap(五) 导航条、分页导航
本文转自:http://www.imooc.com/learn/141 导航条基础导航条(navbar)和上一节介绍的导航(nav),就相差一个字,多了一个"条"字.其实在Boo ...
HTML导航栏的四种制作方法,jQuery+CSS3实现四种应用广泛的导航条制作实例详解
导航条的使用很广,每个网站都会做出具有自己特色的导航条.最近特地去了解了各种类型的导航条,比如具有高亮显示的导航条,中英文互相切换的导航条,具有弹性动画的导航条,甚至是具有摩擦运动动画的导航条(文字下 ...
点击导航高亮 html,jQuery实现的导航条点击后高亮显示功能示例
本文实例讲述了jQuery实现的导航条点击后高亮显示功能.分享给大家供大家参考,具体如下: www.jb51.net jQuery导航条点击后高亮显示 #nav li {float: left; wi ...
多种类型的导航条制作【css3,jquery】
导航条的使用很广,每个网站都会做出具有自己特色的导航条.最近特地去了解了各种类型的导航条,比如具有高亮显示的导航条,中英文互相切换的导航条,具有弹性动画的导航条,甚至是具有摩擦运动动画的导航条(文字下 ...
Bootstrap学习笔记——导航条、分页导航
1 导航条导航条(navbar)比航(nav)复杂很多:导航条(navbar)中有一个背景色.而且导航条可以是纯链接(类似导航),也可以是表单,还有就是表单和导航一起结合等多种形式. 1.1 基础导 ...
横条导航窗体html代码,各式各样的导航条效果css3结合jquery代码实现
导航条的使用很广,每个网站都会做出具有自己特色的导航条.最近特地去了解了各种类型的导航条,比如具有高亮显示的导航条,中英文互相切换的导航条,具有弹性动画的导航条,甚至是具有摩擦运动动画的导航条(文字下 ...
淘宝首页之导航条——弹出式悬浮菜单
昨天学习了布局,今天要来实现弹出式导航条.布局选的flex布局. 关于弹出式悬浮菜单总结了下大概是以下几步: 1.鼠标放到一级菜单上时二级菜单显示,鼠标移开二级菜单隐藏. 2.打算为二级菜单设置一个d ...
导航条——收缩式导航菜单
1.概述在网站中不仅可以设置导航条,而且还可以设置导航菜单.由于菜单内容比较多,同一页面显示比较杂乱,所以很多的设计者都采用了收缩式的菜单形式. 2.技术要点本实例主要是应用JavaScript控 ...

如何让导航条高亮显示

如何让导航条高亮显示相关推荐

最新文章

热门文章