讲解版的导航高亮(新手福利)原生JS
1、先写样式:
导航的排版样式;
导航对应高亮样式:
.d6000f{
background:red;
}
.d6000f a{
color:#fff;
}
我这个地方导航高亮样式为背景红色,字体颜色为白色
2、HTML代码:
直接粘个过来
<ul class="nav"> | |
<li class="aa"><a class="aaa" href="/">首页</a></li> | |
<li class="aa"><a class="aaa" href="***">11111</a> | |
<div class="nav2 ntop" id="nav2"> | |
<ul class="nav2_ul"> | |
<li><a href="***">111112</a></li> | |
<li><a href="***">111113</a></li> | |
<li><a href="***">111114</a></li> | |
<li><a href="***">111115</a></li> | |
<li><a href="***">111116</a></li> | |
</ul> | |
</div> | |
</li> | |
<li class="aa"><a class="aaa" href="***">22222</a></li> | |
<li class="aa"> | |
<a class="aaa" href="***">33333</a> | |
<div class="nav2 ntop" id="nav3"> | |
<ul class="nav2_ul"> | |
<li><a href="***">333332</a></li> | |
<li><a href="***">333333</a></li> | |
</ul> | |
</div> | |
</li> | |
<li class="aa"><a class="aaa" href="***">44444</a></li> | |
<li class="aa"><a class="aaa" href="***">55555</a></li> | |
<li class="aa"><a class="aaa" href="***">66666</a></li> | |
</ul> |
因为在网站中每个顶级导航栏对应不同的页面,那么我们如何让它在对应的页面时,对应的li高亮呢?
下面我们用js代码写下操作。
3、JS代码:
<!--导航高亮jsd代码-->
<script type="text/javascript" language="javascript">
/*顶级导航所有的li*/
var links = document.getElementsByClassName("aa");
/*顶级导航所有的li对应的a*/
var lilen = document.getElementsByClassName("aaa");
/*当前地址栏的url*/
var currenturl = document.location.href;
/*创建变量用来接收数据*/
var last = 0;
/*遍历顶级导航中所有li*/
for (var i=0;i<links.length;i++)
{
/*声明变量接收每个li的url*/
var linkurl = lilen[i].getAttribute("href");
/*判断当前地址栏的url和当前li的url路径对应则执行下面赋值("indexof"判断为-1时,是找不到对应的字符串,而"! = -1",说的就是可以找到对应的字符串)*/
if(currenturl.indexOf(linkurl)!=-1)
{
/*将当前的li的索引赋给last*/
last = i;
}
}
/*当前li设置class名称为设置好的样式"d6000f"*/
links[last].className = "d6000f";
</script>
讲解版的导航高亮(新手福利)原生JS的更多相关文章
- 用原生JS实现爱奇艺首页导航栏
以下是爱奇艺首页的一个导航栏,用原生js写的,静态页面效果如下: 代码如下: <html> <head> <title>爱奇艺</title> < ...
- 讲解版的自动轮播(新手福利)样式和js就不分离了为了看的方便
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- JS原生代码实现导航高亮
一 实现原理 根据当前页面滚动条的高度判断当前页面应当与导航栏中哪个导航相关联,并对相应的导航设置高亮样式. 二 代码解析 先简单写一个页面顶端的导航栏:<nav> <ul> ...
- vue使用原生js实现滚动页面跟踪导航高亮
需要使用vue做一个专题页面. 滚动页面指定区域导航高亮. BetterScroll:可能是目前最好用的移动端滚动插件 如何自定义CSS滚动条的样式? 监听滚动页面事件,对比当前页面的位置与元素的位置 ...
- 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前
思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...
- 原生JS实现购物车结算功能代码+zepto版
html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- 原生js获取鼠标坐标方法全面讲解-zmq
原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:eve ...
- 原生js写的贪吃蛇网页版游戏特效
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <bo ...
- thinkphp实现导航高亮的简单方法
经常会涉及到关于导航菜单高亮显示的问题,大多是通过配合js或者事先分配变量的方式来实现导航高亮的,这里提供另一种思路参考: <ul class="usermenu"> ...
随机推荐
- Google V8编程详解(序)Cloud App
此系列文章转载于此http://blog.csdn.net/feiyinzilgd/article/details/8247723 应用程序发展到今天,应用程序的概念也在不断地发生着 ...
- linux 学习 12 服务管理
第十二讲 Linux服务管理 12.1 Linux服务管理-服务分类 ——Linux服务 ----RPM包默认安装的服务 ————独立的服务 ————基于xinetd服务 ----源码包安装的服务 ...
- 第三周作业--Word Counter
需求分析: 1.写出一个程序,模仿wc.exe,通过输入文件名,实现文件内容读取: 2.统计出文件内容的总字符数.总单词数.行数.每行字符数.每行单词数. 代码分析: 一.打开文件. FILE *fp ...
- case when语句后的表达式
SQL中Case When语句的语法如下 Simple CASE expression: CASE input_expression WHEN when_expression THEN result_ ...
- mysql - 缺失范围和连续范围
初始化数据 # 创建表 DROP TABLE IF EXISTS g; CREATE TABLE g( a INT )ENGINE=INNODB; # 初始化数据 ; ; ; ; ; ; ; ; ; ...
- java:关于文件下载
开发中遇到的问题 一. 场景描述:用户先指定下载路径,服务器将资源文件下载到指定的路径. 首先:该系统采用的是B/S架构,即浏览器.服务器(.数据库). 单纯通过B/S架构,就想要在服务器中去操 ...
- java io流之字符流
字符流 在程序中一个字符等于两个字节,那么java提供了Reader.Writer两个专门操作字符流的类. 字符输出流:Writer Writer本身是一个字符流的输出类,此类的定义如下: publi ...
- div水平垂直居中
我们平时常用的定高,top:50%:left:50%和margin-left负一半宽度margin-top负一半高度的居中方式暂不考虑,因为这种方式大家都会. 第一种绝对定位(absolute cen ...
- UpdatePanel 中 导出Excel按钮
UpdatePanel 中 导出Excel按钮 要加 Triggers </ContentTemplate> <Triggers> <asp:PostBackTrigge ...
- 真正解决问题:maven eclipse tomcat java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderListener
在使用eclipse进行整合springmvc时经常会碰到这样的异常: java.lang.ClassNotFoundException:org.springframework.web.context ...