左侧多级菜单,高亮显示js
左侧多级菜单,如果本页面是当前栏目,则左侧菜单高亮显示
<ul class="nav navbar-stacked" id="navs">
{dede:channelartlist typeid='46,46'}
<li _id="#couse_1" class=""><a id="bb33" href="[field:typelink/]">[field:typename/]</a></li>
{/dede:channelartlist}
</ul>
<script type="text/javascript">
var myNav = document.getElementById("navs").getElementsByTagName("a");//获取nav ul下的a连接
for(var i=0;i<myNav.length;i++){
var links = myNav[i].getAttribute("href");//获取a里面的连接地址
//console.log(myNav[i]);
//<a id="bb" href="[field:typelink/]">[field:typename/]</a>
//console.log(classna);
var myURL = document.location.href;//url 连接地址
//http://st.com/a/ENGLISH/Responsibilities/gaest
if(myURL.indexOf(links) != -1){//duibi
var elem = myNav[i];
var paid = elem.parentElement;//获取父级元素
paid .className="active";//修改腹肌元素的class名
//console.log(paid);//<li></li>
//console.log(myNav[i]);//<a id="bb" href="[field:typelink/]">[field:typename/]</a>
// myNav[i].className="active_2";
}
}
</script>
左侧多级菜单,高亮显示js的更多相关文章
- js实现当前导航菜单高亮显示
为了增加用户体验度,增加网页的易用性和美观度,往往需要把当前导航菜单以特殊方式显示,通常是高亮显示或有不同于其它菜单的背景,有两种方法可以实现,第一种是用纯css来实现,二是用js辅助css来实现,两 ...
- 原生JS封装创建多级菜单函数
手写一个使用原生JS封装的多级菜单的函数,满足以下几点需求. 子类层级不确定,可根据数据自动生成多级菜单. 操作便捷,只需传入一个HTML标签. 缺点: 需要满足特定的数据结构 废话不多说,展示代码. ...
- 两种简单实现菜单高亮显示的JS类(转载)
两种简单实现菜单高亮显示的JS类 近期在写一个博客管理后台的前端,涉及在同一页面两种高亮显示当前菜单的需求.记得当年写静态页时,为了实现高亮都是在每个页面加不同的样式,呵.高亮显示我觉得对于web ...
- js左侧三级菜单导航实例代码
在左侧三级菜单导航想必大家都见到过吧,它的实现过程也并不复杂,下面有个不错的示例,感兴趣的朋友可以了解下 实例代码: <!DOCTYPE html PUBLIC "-//W3C// ...
- django权限二(多级菜单的设计以及展示)
多级权限菜单设计级标题栏 我们现在只有数据展示,要进入其他url还需要手动的输入路径,非常的麻烦,所以我们要设计 一个导航栏以及侧边多级菜单栏,这个展示是通过stark组件的设计的增删改查页面,而 每 ...
- MVC4做网站后台:栏目管理3、删除栏目与左侧列表菜单
一.左侧列表菜单 打开视图Menu.cshtml,增加部分见红框 在category中添加脚本 //栏目菜单加载完毕函数 function CategoryMenu_Ready() { $('#cat ...
- jquery仿天猫商城左侧导航菜单
之前看到有博友写了一个仿天猫商城左侧导航菜单,可惜不提供免费下载,也没有代码.以前自己也写过类似的效果,只是都是一小块一小块的,现在重新拼凑.我将一步一步的实现拼凑过程,希望对你有所帮助. Demo在 ...
- zTree下拉菜单多级菜单多选实现
惯例,先上图: 这是在一个项目中,为了满足样式美观.多级菜单以及多选而将zTree插件更改过后的效果. 在实际的开发过程中,本来zTree也是可以满足需求的,但是zTree多选的话需要checkbox ...
- Jquery多级菜单插件Slimmenu使用说明
Jquery多级菜单插件Slimmenu使用说明 现在扁平化设计逐渐的成为了趋势,不管是pc web,还是移动互联网的应用开发,都在研究和设计Flat ui, 这里有一篇文章说明扁平化的设计的一些想法 ...
随机推荐
- Hyperledger Fabric密码模块系列之BCCSP(三)
fabric中通过工厂模式来生成bccsp实例,进而通过bccsp的接口来提供加密.解密.签名验证以及哈希等操作. fabric的factory工厂默认返回的bccsp实例是sw(也就是所有密码操作都 ...
- IIS部署wordpress4.7.4
准备环境和安装包:win7操作系统 iis php7.1.6 wordpress4.7.4 1.安装iis,需要cgi模块,一般安装建议全部勾选上. 2.安装配置php7.1.6 在官网http ...
- MVC中子页面如何引用模板页中的jquery脚本
MVC中子页面如何引用模板页中的jquery脚本 最近在学习mvc,遇到了一个问题:在html页面中写js代码,都是引用mvc5自带的jquery脚本,虽然一拖(将指定的jquery脚本如 jquer ...
- WebFrom 小程序【分页功能 】
实现分页展示功能 基本功能:上一页.下一页.首页.尾页.跳转 两个重要的变量 1.每页显示几条数据 2.现在是第几页 方法 } /*表格样式*/ .tab { width: %; backgr ...
- MySQL分库分表浅谈
一.分库分表类型 1.单库单表 所有数据都放在一个库,一张表. 2.单库多表 数据在一个库,单表水平切分多张表. 3.多库多表 数据库水平切分,表也水平切分. 二.分库分表查询 通过分库分表规则查找到 ...
- Raspberrypi 3B+ 安装 php+sqlite
按照网上的命令都为安装php5-fpm 和 php5-sqlite, 但是发现无法找到软件,可能是系统版本比较高的缘故,原来的版本已经不支持了. 经过努力华找到如下安装方法 sudo apt-get ...
- Django Rest framework 之 节流
RESTful 规范 django rest framework 之 认证(一) django rest framework 之 权限(二) django rest framework 之 节流(三) ...
- PostgreSQL 10 如何使用 PgAdmin3
自从 PgAdmin4 出来以后,PgAdmin3 就停止开发了,PgAdmin 官网下载的 PgAdmin3 无法支持 PostgreSQL 10 或者更高版本的数据库服务器端. 但是 PgAdmi ...
- 使用Topshelf创建自宿主的Windows服务程序
在传统的Windows服务开发过程中,需要添加一个服务安装程序,里面写安装,启动和停止服务等逻辑.现在,使用TopSelf可以简化这个过程.具体请看官网说明: http://docs.topshelf ...
- loadrunner 场景设计-IP Spoofer-多ip负载生成器(Windows平台)
IP Spoofer-多ip负载生成器 by:授客 QQ:1033553122 1 适用协议 LoadRunner的多ip功能允许运行在单一负载生成器上的Vuser可以通过多ip被识别.服务器和路由 ...