左侧多级菜单,如果本页面是当前栏目,则左侧菜单高亮显示

<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的更多相关文章

  1. js实现当前导航菜单高亮显示

    为了增加用户体验度,增加网页的易用性和美观度,往往需要把当前导航菜单以特殊方式显示,通常是高亮显示或有不同于其它菜单的背景,有两种方法可以实现,第一种是用纯css来实现,二是用js辅助css来实现,两 ...

  2. 原生JS封装创建多级菜单函数

    手写一个使用原生JS封装的多级菜单的函数,满足以下几点需求. 子类层级不确定,可根据数据自动生成多级菜单. 操作便捷,只需传入一个HTML标签. 缺点: 需要满足特定的数据结构 废话不多说,展示代码. ...

  3. 两种简单实现菜单高亮显示的JS类(转载)

    两种简单实现菜单高亮显示的JS类   近期在写一个博客管理后台的前端,涉及在同一页面两种高亮显示当前菜单的需求.记得当年写静态页时,为了实现高亮都是在每个页面加不同的样式,呵.高亮显示我觉得对于web ...

  4. js左侧三级菜单导航实例代码

    在左侧三级菜单导航想必大家都见到过吧,它的实现过程也并不复杂,下面有个不错的示例,感兴趣的朋友可以了解下 实例代码:   <!DOCTYPE html PUBLIC "-//W3C// ...

  5. django权限二(多级菜单的设计以及展示)

    多级权限菜单设计级标题栏 我们现在只有数据展示,要进入其他url还需要手动的输入路径,非常的麻烦,所以我们要设计 一个导航栏以及侧边多级菜单栏,这个展示是通过stark组件的设计的增删改查页面,而 每 ...

  6. MVC4做网站后台:栏目管理3、删除栏目与左侧列表菜单

    一.左侧列表菜单 打开视图Menu.cshtml,增加部分见红框 在category中添加脚本 //栏目菜单加载完毕函数 function CategoryMenu_Ready() { $('#cat ...

  7. jquery仿天猫商城左侧导航菜单

    之前看到有博友写了一个仿天猫商城左侧导航菜单,可惜不提供免费下载,也没有代码.以前自己也写过类似的效果,只是都是一小块一小块的,现在重新拼凑.我将一步一步的实现拼凑过程,希望对你有所帮助. Demo在 ...

  8. zTree下拉菜单多级菜单多选实现

    惯例,先上图: 这是在一个项目中,为了满足样式美观.多级菜单以及多选而将zTree插件更改过后的效果. 在实际的开发过程中,本来zTree也是可以满足需求的,但是zTree多选的话需要checkbox ...

  9. Jquery多级菜单插件Slimmenu使用说明

    Jquery多级菜单插件Slimmenu使用说明 现在扁平化设计逐渐的成为了趋势,不管是pc web,还是移动互联网的应用开发,都在研究和设计Flat ui, 这里有一篇文章说明扁平化的设计的一些想法 ...

随机推荐

  1. VirtualBox安装CentOS7

    一:.下载CentOS7的镜像 下载地址:https://www.centos.org/download/ 进入后有三个版本可以选择: 1.DVD ISO  标准安装版,一般下载这个就可以了(推荐)本 ...

  2. .net导出excle无需任何插件,直接通过一个tablehtml实现

    项目背景: 项目需要导出样式复杂的excl表格,主要是一些样式布局比较复杂 技术分析: 目前比较通用的实现方式有 1.借助微软的excle插件 2.通过NPOI插件实现 3.直接导出一个html(ta ...

  3. laravel使用JSON 类型方式进行存储

    Laravel 从 5.0 版本开始就已支持 JSON 数据的转换,但这样做的目的只是为了方便数据处理.你的数据依然以 TEXT 类型存放在你的数据库里.不过 MySQL 从 5.7 版本起开始支持原 ...

  4. Jjava8 Lambda 神操作

    public class Lambda { @FunctionalInterface public interface AddInter { void add(int x, long y); } pu ...

  5. Matlab Euler's method

    % matlab script to test efficiency of % Euler's method, classical Runge-Kutta, and ode45 % on Arenst ...

  6. Minitab系列 前言

    Matlab 在有些时候太过去强大,强大到几乎所有的数学问题都可以解决. 在这里,Matlab就像数学版的Vim,对于一般的使用者还是不想编程,想要更加的直接直观的数学处理工具,这里向大家介绍mini ...

  7. SSM(Spring+SpringMvc+Mybatis)整合笔记

    1.使用开发工具 jdk1.8 eclipse Tomcat7.0 MySql 2.创建数据库和表,由于重点是整合,所以数据库就随意加几条数据. 3.创建动态Web项目(推荐使用Maven可以用配置来 ...

  8. HDU4278

    Faulty Odometer Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)T ...

  9. Salesforce 小知识 - 必需字段

    将字段定义为"必需" 当我们为对象设置字段的属性时,我们需要让某些字段在建立记录的时候必需有值,比如定义一个"地址"对象,那么必须填入"邮编" ...

  10. 超级干货 :一文读懂数据可视化 ZT

    前言 数据可视化,是指将相对晦涩的的数据通过可视的.交互的方式进行展示,从而形象.直观地表达数据蕴含的信息和规律. 早期的数据可视化作为咨询机构.金融企业的专业工具,其应用领域较为单一,应用形态较为保 ...