<!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. spring 标注 详解

    http://snowolf.iteye.com/blog/578452 http://snowolf.iteye.com/blog/578452  非常棒的入门读物

  2. linux (centos) 单机50w+链接 内核参数配置

    1 突破系统最大fd   查看当前文件描述符的限制数目的命令: ulimit -n .修改文件描述符的限制数目 2.1 临时改变当前会话: ulimit -n 2.2 永久变更需要下面两个步骤: ./ ...

  3. xss实例-什么都没过滤的情况

    1. XSS的存在,一定是伴随着输入,与输出2个概念的. 2. 要想过滤掉XSS,你可以在输入层面过滤,也可以在输出层面过滤. 3. 如果输入和输出都没过滤. 那么漏洞将是显而易见的. 4. 作为第一 ...

  4. 新浪微博客户端(20)-集成MJRefresh

    HomeViewController.m /** 集成下拉刷新控件 */ - (void)setupPullToRefreshView { __unsafe_unretained UITableVie ...

  5. Xcode6中添加pch全局引用文件

    前沿:xcode6中去掉了pch,为了一些琐碎的头文件引用,加快了 编译速度! xcode6添加pch文件方法 1. 右键Supporting File,选择“New File” 2. 选择Other ...

  6. js返回上一步

    用按钮来链接返回上一步. <input type ="button" value="返回上一步" onclick="javascript:his ...

  7. URAL 1932 The Secret of Identifier 题解

    http://acm.timus.ru/problem.aspx?space=1&num=1932 B - The Secret of Identifier Time Limit:1000MS ...

  8. matlab 之cov 协方差

    COV 1.cov(x) 如果x为向量,返回x的方差 计算方法为: S为方差. 2.cov(X) 如果X为矩阵,把矩阵X的行作为观察值,把列作为变量,返回X的协方差矩阵: diag(cov(X))是每 ...

  9. Android Broadcast Receiver 使用入门

    Broadcast Receiver 的使用        1.Broadcast Receiver简介        2.Broadcast Receiver接收系统自带的广播        3.自 ...

  10. [Effective JavaScript 笔记] 第5条：避免对混合类型使用==运算符

    “1.0e0”=={valueOf:function(){return true;}} 是值是多少? 这两个完全不同的值使用==运算符是相等的.为什么呢?请看<[Effective JavaSc ...