js实现导航菜单点击切换选中时高亮状态——方法二
来源:互联网 发布:如何更换淘宝会员名 编辑:程序博客网 时间:2024/06/08 03:19
<!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><title>选中当前菜单后高亮</title><style type="text/css">.nav { WIDTH: 100%; HEIGHT: 60px; BACKGROUND-COLOR:#000000; font-family:Arial, Helvetica, sans-serif; font-size:14px;}.nav UL { PADDING: 0px; DISPLAY: block; MARGIN: 0px; LIST-STYLE-TYPE: none; HEIGHT: 60px; }.nav LI { BORDER-RIGHT: #ffffff 1px solid; DISPLAY: block; FLOAT: left; width:200px; text-align:center; font-size:14px;}.nav LI A { DISPLAY: block; FONT-WEIGHT: none; COLOR: #ffffff; LINE-HEIGHT: 60px; TEXT-DECORATION: none;}.nav LI A:hover { COLOR:blue; font-weight:800; font-size:18px; BACKGROUND-COLOR:yellow; TEXT-DECORATION: none;}.current{ color:#ffffff; background:blue;}.nav li#date{ color:#ffffff; PADDING:2px 15px 0; }</style><script language="javascript" type="text/javascript">var $c=function(array){var nArray = [];for (var i=0;i<array.length;i++) nArray.push(array[i]);return nArray;};Array.prototype.each=function(func){for(var i=0,l=this.length;i<l;i++) {func(this[i],i);};};document .getElementsByClassName=function(cn){var hasClass=function(w,Name){var hasClass = false;w.className.split(' ').each(function(s){if (s == Name) hasClass = true;});return hasClass;}; var elems =document.getElementsByTagName("*")||document.all; var elemList = []; $c(elems).each(function(e){if(hasClass(e,cn)){elemList.push(e);} }) return $c(elemList);};function change_bg(obj){var a=document.getElementsByClassName("nav")[0].getElementsByTagName("a");for(var i=0;i<a.length;i++){a[i].className="";}obj.className="current";}</script></head><body><DIV class="nav"> <UL> <LI><A href="#" onclick="change_bg(this)">脚本首页</A></LI> <LI><A href="#" onclick="change_bg(this)">网页特效</A> </LI> <LI><a href="#" class="current" onclick="change_bg(this)">精品脚本</a> </LI> <LI><A href="#" onclick="change_bg(this)">ASP代码</A> </LI> <LI><A href="#" onclick="change_bg(this)">PHP代码</A> </LI> <LI><A href="#" onclick="change_bg(this)">JSP代码</A> </LI> <LI><A href="#" onclick="change_bg(this)">脚本资源</A> </LI> <LI><A href="#" onclick="change_bg(this)">软件下载</A> </LI> </UL></DIV></body></html>
0 0
- js实现导航菜单点击切换选中时高亮状态——方法二
- 用js实现导航菜单点击切换选中时高亮状态
- js实现导航菜单点击切换选中时高亮状态
- jquery实现导航菜单点击切换选中时高亮状态
- JS点击导航菜单选中效果
- js导航栏处于选中状态
- js导航栏处于选中状态
- 使用JS实现导航切换时高亮显示
- 点击隐藏汉堡菜单、单页面导航插件—jquery.singlePageNav.min.js、
- js实现简单导航切换
- JS实现折叠式导航菜单
- js实现导航菜单效果
- JS实现点击按钮图片左右切换、点击图片按钮出现下拉菜单
- 底部菜单导航点击切换页面事件(无ViewPager)
- JS实现点击切换事件
- 导航栏目选中状态
- (js)用window.onload实现刷新页面的导航栏状态的切换
- CSS+JS制作导航栏点击选中效果
- 利用css设置超链接不能点击或者失效(实际项目版)
- EasyUI datagrid实现翻页保持选中状态
- C++:继承访问说明符
- mac终端配置gradle环境变量
- eclipse调试以及step into step over step return区别
- js实现导航菜单点击切换选中时高亮状态——方法二
- 排序算法
- SVN库迁移
- redis 参数优化
- 华为oj--整型数组合并
- 云时代的分布式数据库:阿里分布式数据库服务DRDS
- Docker学习笔记2: Docker 概述
- WebView 实现 NestedScrollingChild
- Kubernetes用户指南(三)--在生产环境中使用Pod来工作、管理部署