<!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. WinForm AutoComplete 输入提示、自动补全

    一.前言 又临近春节,作为屌丝的我,又要为车票发愁了.记得去年出现了各种12306的插件,最近不忙,于是也着手自己写个抢票插件,当是熟悉一下WinForm吧.小软件还在开发中,待完善后,也写篇博客与大 ...

  2. （翻译）初学者的object-C指南

    初学者的object-C指南 英文原文:http://blog.teamtreehouse.com/the-beginners-guide-to-objective-c-language-and-va ...

  3. github和bitbucket

    注册一个github跟注册一个163的邮箱一样容易 页面中 div方块的 布局和 尺寸, 主要是考虑功能/ 结构/布局, 基本上与其中的内容 的多少无关: 即使内容/文字很少, 也还是要那么宽的尺寸 ...

  4. 模板插件aTpl

    摘要: 前面给大家分享了一款js模板插件,后来经过完善推荐给大家.该插件支持ie5+,chrome等浏览器以及移动端浏览器,支持for和if语法,以及表达式. 项目地址:https://github. ...

  5. Stockbroker Grapevine(floyd)

    Stockbroker Grapevine Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 28231   Accepted: ...

  6. Emag eht htiw Em Pleh（imitate)

    Emag eht htiw Em Pleh Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 2901   Accepted:  ...

  7. 第11章 使用Vsftpd服务传输文件

    章节简述: 本章节先通过介绍文件传输协议来帮助读者理解FTP协议的用处,安装vsftpd服务程序并逐条分析服务文件的配置参数. 完整演示vsftpd服务匿名访问模式.本地用户模式及虚拟用户模式的配置方 ...

  8. Unity3d发布成exe项目后的设置(全屏自适应屏幕大小)

    原地址:http://blog.sina.com.cn/s/blog_697b1b8c0101gd46.html 1.  去除启动exe项目时出现的画面窗口 File ☞ Build Settings ...

  9. ris'In App Purchase总结

    原地址:http://www.cocoachina.com/bbs/read.php?tid=38555&page=1 In App Purchase属于iPhone SDK3.0的新特性,用 ...

  10. reverse array java

    /* package whatever; // don't place package name! */ import java.util.*; import java.lang.*; import ...