如何给引入的公共的当前导航添加样式???

因为头部是公共的,所以无法通过添加类的方式控制当前选中的类的颜色等样式。我们只能通过其他方法解决。

1、原理:首先找到当前a,然后循环判断,如果浏览器地址栏地址和a的href相等,就说明当前导航找到,添加定义的类。

2、代码

$(document).ready(function() {
  var mynav = $(‘.navbar-nav>li‘).find(‘a‘); //寻找导航的a元素
  for(var i = 0; i < mynav.length; i++) {  //循环遍历    var links = mynav[i].getAttribute(‘href‘); //取出每个链接的href属性的值
    var myurl = document.location.href; //取出当前窗口的链接
    if(myurl.indexOf(links) != -1) { //判断浏览器地址是否等于当前a元素的href属性
      mynav[i].className = "nav-hover"; //添加类
    }
  }
})

3、详解indexof方法

  indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

  如果要检索的字符串值没有出现,则该方法返回 -1。

注意:indexOf() 方法对大小写敏感!

时间: 2024-10-08 10:08:12

如何给引入的公共的当前导航添加样式???的相关文章

html 引入页面公共部分(header、footer)

html引入页面的公共部分,比如导航栏啊,页头页脚之类的. 1.将需要引入的公共html部分转换为js文件,这里推荐一个转换工具地址 http://tool.chinaz.com/Tools/Html_Js.aspx 2.在html页面引入这个js文件就可以了 原文地址:https://www.cnblogs.com/mica/p/10709098.html

swift 给导航添加item,实现界面的跳转

//给导航添加item var rightItem = UIBarButtonItem(title: "First", style: UIBarButtonItemStyle.Plain, target: self, action: "fisrtItem:") rightItem.title = "First" self.navigationItem.rightBarButtonItem = rightItem 点击事件 func fisrtIt

信息化系统导航菜单样式实现

实现的菜单效果:  选中的是绿色的菜单,其余为灰色的. 实现方法:具体菜单使用图片代替,不采用文字和css组合实现. 主要JS代码: 点击菜单的时候,先遍历移除已有的选中菜单样式,然后再添加新的菜单对应样式 changeC(id,img); var index=img.indexOf("."); var imgPath='<%=basePath %>images/menu/'+img.substring(0,index)+'w.png'; document.getEle

Bootstrap -- 导航栏样式、分页样式、标签样式、徽章样式

1. 使用图标的导航栏 使用导航栏样式: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>My Test bootstrap</title> <link rel="stylesheet" href="

你能用CSS为导航添加的效果

这篇博将分享几种纯 css 写的网页导航效果,但在正文开始之前,想跪谢腾讯开发[QQ for Mac 5.3.0或更高版本]自带的 ?? 录屏功能 ?? 向大佬低头 ???? command + control + R 快捷录屏,保存为 gif 格式.酱紫一来就能更完美的展现页面效果噜- ( ?? .? ?? )? 以下所有效果源码都可以到 这里 下载 1.导航 二级菜单翻转效果 结构创建 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <header> &

html 如何引入一个公共的头部和底部

2016-01-08 作者案:尽己之力,用心打造一个商城!当你有十二分力气时,发现用了十分力气依旧没什么进展,请不要放弃希望:或许你想得到的东西正在十二分力气的地方等你:假若你用尽了十二分力气,还是没有得到,没什么可懊恼的呀,说明你用力的方向错了呗,(偷笑一个),是否觉得彼岸又离你近了一步? 我准备独立出头部和底部文件 界面用shtml 注意点:文件后缀名shtml  然后引用的文件路径有问题 参考文章地址: 做了两个公共的html页面:top.html和footer.html 一个index.

CodeIgniter 引入自定义公共函数

CodeIgniter 中公共函数不能追加,可以通过 helper 辅助函数实现. 创建 common_helper.php 文件,定义所需公共函数,存放至 application/helpers 目录中. 在 application/config/autoload.php 中配置 $autoload['helper'] = array('common'); 即可.

React实现顶部固定滑动式导航栏(导航条下拉一定像素时显示原导航栏样式)

摘要 基于react的框架开发一个顶部固定滑动式的酷炫导航栏,当导航栏置顶时,导航栏沉浸在背景图片里:当鼠标滑动滚轮时,导航栏固定滑动并展示下拉样式. HTML部分 相关技术栈:react.antd.react-router.详细的技术栈应用请参考官方文档的使用说明. * 展示主页App.jsx组件代码 import React from 'react'; import './App.css'; import { Link, Route } from 'react-router-dom'; im

深和学习导航CSS样式

一个很容易理解,具体导航栏CSS授课风格 诚奉献给朋友: 原文地址:点击这里.