左侧多级菜单,高亮显示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>

时间: 2024-12-21 13:24:12

左侧多级菜单,高亮显示js的相关文章

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

两种简单实现菜单高亮显示的JS类 近期在写一个博客管理后台的前端,涉及在同一页面两种高亮显示当前菜单的需求.记得当年写静态页时,为了实现高亮都是在每个页面加不同的样式,呵.高亮显示我觉得对于web前端来说,是比较常用到的效果,正好此次又要用到,特地整理出我所写的两种高亮类. 其实思路很简单,第一种方法是通过遍历链接组的href值,通过indexOf判断href值是否被包含在浏览器当前url值中.此方法有一定局限,比如对于iframe内的菜单是不能这样判断的; 第二种方法适用范围更广一样,实现思路

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

为了增加用户体验度,增加网页的易用性和美观度,往往需要把当前导航菜单以特殊方式显示,通常是高亮显示或有不同于其它菜单的背景,有两种方法可以实现,第一种是用纯css来实现,二是用js辅助css来实现,两个种方法都比较简单,相对而言js更简单些,下面介绍用js来实现的方法: 首页假设我们的导航代码是这样写的: <div id="navi"><ul><li><a href="1.html">主页</a></

水平布局的多级网页菜单,JS、css代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

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

手写一个使用原生JS封装的多级菜单的函数,满足以下几点需求. 子类层级不确定,可根据数据自动生成多级菜单. 操作便捷,只需传入一个HTML标签. 缺点: 需要满足特定的数据结构 废话不多说,展示代码.先展示数据代码,注意,使用此封装函数需要满足此数据结构. var data = [{ id: 1, address: "安徽", parent_id: 0 }, { id: 2, address: "江苏", parent_id: 0 }, { id: 3, addre

JavaScript处理数据完成左侧二级菜单的搭建

我们在项目中应用的后台管理框架基本上都是大同小异,左侧是一个二级菜单,点击选中的菜单,右侧对应的页面展示.我把前端页面封装数据的过程整理了一下,虽然不一定适合所有的管理页面,仅作为案例来参考,只是希望大家能明白实现原理就好. 左侧的菜单的搭建: 1.首先将我们需要应用的菜单导入数据库. 下面的截图是我导入的数据: 根据我的业务需求,我需要四个父菜单,所以我将他们的pid字段都设置为0,子菜单的pid字段对应的是父菜单的id,这很重要.url字段就是点击该菜单时,右侧页面显示的地址路径.statu

easyui左侧导航菜单右侧载入百度地图项目框架

代码下载 http://pan.baidu.com/s/1cDht7K 一个左侧是导航菜单,右侧是百度地图的应用: 一 左侧菜单 使用jquery easyui框架:网上下的资源:运行后如下: 二 修改菜单 修改后如下:标注,地理要素,数据管理:这些是GIS功能: 三 jquery  easyui框架是这么用的: 单击左侧不同菜单:链接到不同html文档:就会在右侧显示相应文档: 四 载入百度地图 在其中一个demo2.html中,载入百度地图:效果如下:以后可点击左侧菜单,在右侧增加百度地图应

用jquery根据json动态创建多级菜单导航

HTML结构: <section class="sidebar"></setion> { "liClass": "active treeview", "link": "index2.html", "label": "结构预览", "iClass": "'fa fa-dashboard'", "c

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

惯例,先上图: 这是在一个项目中,为了满足样式美观.多级菜单以及多选而将zTree插件更改过后的效果. 在实际的开发过程中,本来zTree也是可以满足需求的,但是zTree多选的话需要checkbox选择框,这样导致样式风格和项目总体不一致.下面是根据ztree所修改的内容. 如上图 这是个outlook样式的菜单. 我们只需要简单的右键,查看代码,就可以把源码拿下来看看. 我们需要的源码如下: <SCRIPT type="text/javascript"> <!--

jquery实现左侧折叠菜单

实现代码如下: <!-- jquery实现左侧折叠菜单 --> <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <style> #container{ width:200px; height:500px; border:1p