<!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. hdu 2085 核反应堆

    看完题,想到用结构体存储高质点和低质点,然后打表存储<33的质点数量. #include<stdio.h> struct hilo { long long hi,lo; }; int ...

  2. php多态设计

    原文:http://www.cnblogs.com/tecs27/archive/2012/03/13/2394028.html 多态性是指相同的操作或函数.过程可作用于多种类型的对象上并获得不同的结 ...

  3. codejumper的跳转代码

    public void JumpToSource(vsCMPart location = vsCMPart.vsCMPartNavigate) { TextPoint startPoint = Ori ...

  4. 批量删除亚马逊kindle云端文档

    首先鄙视亚马逊的不负责任,kindle的云端管理系统犹如一坨狗屎,根本没有考虑的任何用户体验,只能一个一个删除不说,删除后又回到第一页...翻页也没有输入页码的地方,如果在第100页删除文档后,又回到 ...

  5. linux安全加固(1)

    Redhat是目前企业中用的最多的一类Linux,而目前针对Redhat攻击的黑客也越来越多了.我们要如何为这类服务器做好安全加固工作呢? 一. 账户安全 1.1 锁定系统中多余的自建帐号 检查方法: ...

  6. smarty中math函数的用法

    在查看项目代码时,发现smart代码中有这样写. {if $auctionInfo.printingNum} 印数:{math equation="cid/1000" cid=$a ...

  7. FineUI第三天----WebConfig的配置

    这张我们讲讲整个站点Web.config配置文件的配置 Theme: 控件主题,目前支持三种主题风格(blue/gray/access,默认值:blue) Language: 控件语言(en/zh_C ...

  8. Android如何在java代码中设置margin

    习惯了直接在xml里设置margin(距离上下左右都是10dip),如: <ImageView android:layout_margin="10dip" android:s ...

  9. Unity3D使用小技巧

    原地址:http://unity3d.9tech.cn/news/2014/0411/40178.html 1.Crtl+f摄像机自动适配场景. 2.可以用一个立方体作为底盘. 3.人物角色可以直接引 ...

  10. [POJ1003]Hangover

    [POJ1003]Hangover 试题描述 How far can you make a stack of cards overhang a table? If you have one card, ...