jq 动态添加.active 实现导航效果
代码思路:
页面4:
页面5:
代码思路:
通过jq获取你打开页面的链接 window.location.pathname;
在HTML中给自己的li加入一个ID id的命名与网址链接中的href相同
通过jq包含方法找到相对应的li给他加入active类名
然后。。就没有然后了。。。
jq代码:
$(function () { var li = $(".title_ul").children("li"); for (var i = 0; i < li.length; i++) {
var url = window.location.pathname;
var url = url.replace("/", "");
if (url.indexOf(li[i].id)!=-1) {
li[i].firstChild.className = "active"; } else {
li[i].firstChild.className = "";
}
}
})
html代码:
<body>
<div class="title">
<ul class="title_ul">
<li id="index"><a href="index.html" class="">页面1</a></li>
<li id="zf"><a href="zf.html" class="">页面2</a></li>
<li id="gc"><a href="gc.html" class="">页面3</a></li>
<li id="hc"><a href="hc.html" class="">页面4</a></li>
<li id="shwt"><a href="shwt.html" class="">页面5</a></li>
</ul>
</div>
</body>
喜欢的朋友可以去试试 ^_^ 转载清注明出处!!!
jq 动态添加.active 实现导航效果的更多相关文章
- AngularJS 导航栏动态添加.active
在传统jQuery中,实现导航栏动态添加.active类的思路比较简单,就是当点击的时候,清除其他.active,然后给当前类加上.active. 但是在AngularJS中,就不能再采用这种jQue ...
- jq动态添加的元素触发绑定事件无效
<div class='a'> <div class='b'> </div> 其中$('.a')是html页面的元素,$('.b')是jq动态添加的元素.$(&qu ...
- js/jq 动态添加的元素不能触发绑定事件解决方案
<!-- Copyright 2017-10-27, Jachin QQ: 381558301 Email: 381558301@qq.com 请看看你们的版本并对号入座: jquery1.6版 ...
- ThinkPHP框架下,给jq动态添加的标签添加点击事件移除标签
jq移除标签主要就是$("#要移除的id").remove();不再赘述,这里要提醒的是jq中动态添加标签后怎样添加点击事件.一般的jq添加点击事件是用这种方法$("#i ...
- js JQ动态添加div标签
function renderList(data){ var str = ''; for(var i = 0; i < data.length; i++){ // 动态添加li str += ' ...
- jq动态添加onclick事件在谷歌中不起作用
$("#oa-bed-rooType").append($('<option/>').val(0).text('请选择房间类型')); $('#oa-bed-roomT ...
- JQ 动态添加节点
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jq动态添加代码监听问题
$(document).on('click', '.class', function() { console.log($(this).attr('id')); });
- 用jq动态给导航菜单添加active
点击后页面跳转到了新的链接,找到所有的li下的a标签,对其链接地址进行判断,如果和当前浏览器的地址一致,就认为是当前应该激活的菜单,添加active类,否则就取消. <ul class=&quo ...
随机推荐
- DDD理论学习系列(11)-- 工厂
DDD理论学习系列--案例及目录 1.引言 在针对大型的复杂领域进行建模时,聚合.实体和值对象之间的依赖关系可能会变得十分复杂.在某个对象中为了确保其依赖对象的有效实例被创建,需要深入了解对象实例化逻 ...
- java中常用的包、类、以及包中常用的类、方法、属性----sql和text\swing
java中常用的包.类.以及包中常用的类.方法.属性 常用的包 java.io.*; java.util.*; java.lang.*; java.sql.*; java.text.*; java.a ...
- 禅道SQA
背景 近期以项目质量和测试管理的角色介入了一个大型的项目中间,项目的业务测试方面重点在节点把控和风险跟进. 以往进行测试进度展示是通过bug解决进度及整体走势图来进行体现,这块手工作图太过麻烦,干脆整 ...
- json-server mock数据
前言: 项目开发中,影响项目进程的常常是由于在前后端数据交互的开发流程中停滞,前端完成静态页面的开发后,后端迟迟未给到接口.而现在,我们就可以通过根据后端接口字段,建立一个REST风格的API接口,进 ...
- 分享一个PHP文件上传类
该类用于处理文件上传,可以上传一个文件,也可以上传多个文件. 包括的成员属性有: private $path = "./uploads"; //上传文件保存的路径 private ...
- C#设计模式总结(转)
一.引言 经过这段时间对设计模式的学习,自己的感触还是很多的,因为我现在在写代码的时候,经常会想想这里能不能用什么设计模式来进行重构.所以,学完设计模式之后,感觉它会慢慢地影响到你写代码的思维方式.这 ...
- vue指令v-bind示例解析
1.绑定一个属性 <img id="app" v-bind:src="imageSrc"> <script> var app = Vue ...
- opencv 小程序170323
1.滤波 GaussianBlur(imgThresholded, imgThresholded, Size(5, 5), 0, 0);//高斯滤波 medianBlur(imgThresholded ...
- linux下添加定时任务
linux下定时任务文件在/etc/crontab 直接vim /etc/crontab 打开就行 在crontab文件中如何输入需要执行的命令和时间.该文件中每行都包括六个域,其中前五个域是指定命令 ...
- Selenium对于对话框alert,confirm,prompt的处理
html 源码: <html> <head> <title>Alert</titl ...