<!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 charset="utf-8">

<title>js选中当前菜单后高亮</title>

<style type="text/css">

.nav {

    MARGIN: 1px ;

    WIDTH: 100%;

    FONT-FAMILY: verdana;

    HEIGHT: 21px;

    BACKGROUND-COLOR: #970B0B;

    font-family:Arial, Helvetica, sans-serif;

    font-size:12px;

}

.nav UL {

    PADDING: 0px;

    DISPLAY: block;

    MARGIN: 0px;

    LIST-STYLE-TYPE: none;

    HEIGHT: 21px;

    BACKGROUND-COLOR: #970B0B;

    COLOR: #ffffff;

}

.nav LI {

    BORDER-RIGHT: #ffffff 1px solid;

    DISPLAY: block;

    FLOAT: left;

    HEIGHT: 21px;

    font-family:Arial, Helvetica, sans-serif;

    font-size:12px;

}

.nav LI A {

    PADDING:1px 15px ;

    DISPLAY: block;

    FONT-WEIGHT: none;

    COLOR: #ffffff;

    LINE-HEIGHT: 20px;

    TEXT-DECORATION: none;

}

.nav LI A:hover {

    COLOR:#;

    BACKGROUND-COLOR: #f4f524;

    TEXT-DECORATION: none;

}

.current{

  color:#ffffff;

  background:blue;

}

.nav li#date{

  color:#ffffff;

  PADDING:2px 15px ;

}

</style>

<script language="javascript" type="text/javascript">

var  $c=function(array){var nArray = [];for (var i=;i<array.length;i++) nArray.push(array[i]);return nArray;};

Array.prototype.each=function(func){

for(var i=,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")[].getElementsByTagName("a");

for(var i=;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>

js选中当前菜单后高亮显示的导航条的更多相关文章

  1. CSS3+Js制作的一款响应式导航条

    今天制作了一个响应式导航条,能够自动随着不同的屏幕分辨率或浏览器窗口大小的不同而改变导航条的样式,这里主要用到的就是CSS3的Media Query.具体可以查看浅谈响应式布局这篇文章,这里就不花费大 ...

  2. 纯CSS实现下拉菜单及下拉容器等（纯CSS实现导航条及导航下拉容器）

    虽然网上类似甚至相同的案例有很多,但是我还是写下,以记下笔记,也可供大家参考 希望大家可以指导批评~~ 首先我们以列表ul li 来开始我们菜单也可以说导航条的制作: 在页面中我们首先构建以下XHTM ...

  3. bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120

    为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...

  4. 织梦DedeCMS v5.7 实现导航条下拉菜单

    首先将下面这段代码贴到templets\default\footer.htm文件里(只要在此文件里就行,位置无所谓) <</span>script type='text/javasc ...

  5. JavaScript网站设计实践（二）实现导航栏当前所选页面的菜单项高亮显示

    一.(一)中的代码还可以修改的地方. 在(一)中,如果是运行在服务器下,如apache等,可以把head和navigation的div抽取出来,放置在另一个html文件里,然后在页面中,include ...

  6. Slideout.js – 触摸滑出式 Web App 导航菜单

    Slideout.js 是为您的移动 Web 应用开发的触摸滑出式的导航菜单.它没有依赖,自由搭配简单的标记,支持原生的滚动,您可以轻松地定制它.它支持不同的 CSS3 转换和过渡.最重要的是,它只是 ...

  7. 仿新浪游戏频道js多栏目全屏下拉菜单导航条

    仿新浪游戏频道js多栏目全屏下拉菜单导航条,新浪,游戏频道,js组件,多栏目,全屏下拉,下拉菜单,导航条.代码下载地址:http://www.huiyi8.com/sc/26765.html更多请访问 ...

  8. 利用js和JQuery定义一个导航条菜单

    利用js和JQuery定义一个导航条 效果: 一.html代码: <div class="Maintenance"> <div class="Title ...

  9. Bootstrap学习笔记（5）--实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单

    实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单 微笑的鱼 2014-01-03 Bootstrap 5,281 次围观 11条评论 使用Bootstrap导航条组件时,如果你的导航条带有下拉 ...

随机推荐

  1. php-5.3 zend opcache 的设置

    故障现象,修改了代码上传到生产服务器之后,需要等待60秒才生效. 细查了一下,是opcache引起的,默认是60秒.于是我给关了,之前是ea加速,现在新版本的php好像用这个opcache了:; 2s ...

  2. Component creation must be done on Event Dispatch Thread错误解决方法

    在用java swing 做例子,给页面设置皮肤样式的时候出现了这个错误: org.jvnet.substance.api.UiThreadingViolationException: Compone ...

  3. JavaScript 参数传递与变量复制

            ECMAScript 变量可能包含两种不同数据类型的值:基本类型值和引用类型值. 基本类型值指的是简单的数据段,而引用类型值指那些可能由多个值构成的对象.         5 种基本数 ...

  4. ECMAScript6-下一代Javascript标准

    介绍 ECMAScript6是下一代Javascript标准,这个标准将在2015年6月得到批准.ES6是Javascript的一个重大的更新,并且是自2009年发布ES5以来的第一次更新. 它将会在 ...

  5. mysql查询在一张表不在另外一张表的记录

    mysql查询在一张表不在另外一张表的记录   问题:    查询一个表(tb1)的字段记录不在另一个表(tb2)中      条件:tb1的字段key的值不在tbl2表中      -------- ...

  6. Server Application Unavailable出现的原因及解决方案集锦

    iis ServerAppl 共存 应用程序池 站点  在Asp.net站点中经常出现这种提示 Server Application Unavailable The web application y ...

  7. [Effective JavaScript 笔记] 第9条：始终声明局部变量

    如果忘记将变量声明为局部变量,该变量将会隐式地转变为全局变量 function swap(a,i,j){ temp=a[i]; a[i]=a[j]; a[j]=temp; } 尽管该程序没有使用var ...

  8. 使用Cydia Substrate 从Native Hook Android Native世界

    同系列文章: 使用Cydia Substrate 从Native Hook Android Java世界 使用Cydia Substrate Hook Android Java世界 一.建立工程 手机 ...

  9. Tushare的安装

    TuShare是一个免费.开源的python财经数据接口包.主要实现对股票等金融数据从数据采集.清洗加工到数据存储的过程,能够为金融分析人员提供快速.整洁.和多样的便于分析的数据. 考虑到python ...

  10. [ES4封装教程]3.使用 Easy Sysprep v4 封装 Windows 7

    (一)安装与备份系统 1.安装 Windows 7 可能很多人会说,安装Win7谁不会,这也用说?装Win7的确人人都会,但如何安装才是最适合系统封装的,就未必是人人都会了.安装是封装之本,没有好的安 ...