<!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. 伪分布模式下执行wordcount实例时报错解决办法

    问题1.不能分配内存,错误提示如下: FAILEDjava.lang.RuntimeException: Error while running command to get file permiss ...

  2. 模拟创建类变量，static变量加类方法，单例

    @interface Model + (int) value; + (void) setValue:(int)val; @end @implementation Model static int va ...

  3. ssh框架整合完整版

    1.导入jar包 可以在src下添加一个log4j.properties文件来记录日志 2.加入实体类+映射文件 映射:从类入手class+属性 a.映射的头文件在:hibernate3.jar--& ...

  4. 一个C++类的注释：

    #ifndef __RUNTIMEPARA__HPP#define __RUNTIMEPARA__HPP #include <string> //后面会有介绍 #include <m ...

  5. Entity Framework Fluent API

    前言 使用DataAnnotation非常简单,但对于EntityFramework中的特性,就要在实体类中引入EntityFramework程序集,但实体类最好能是保持与架构无关性的POCO类,才能 ...

  6. 如何用sql批量删除一个id段内的dedecms文章?

    之前因为ytkah批量添加了dedecms文章,数量有些多,后面出现问题了,想要删除一部分织梦文章,后台一篇篇删,删到手软(相关内容:修改dedecms关键词到手软),于是就想到了sql数据库操作!那 ...

  7. HDU 4911 http://acm.hdu.edu.cn/showproblem.php?pid=4911(线段树求逆序对）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4911 解题报告: 给出一个长度为n的序列,然后给出一个k,要你求最多做k次相邻的数字交换后,逆序数最少 ...

  8. OpenCV的基本数据结构

    参考:http://www.cnblogs.com/guoqiaojin/p/3176692.html

  9. jQuery属性，方法操作

     addClass() 向匹配的元素添加指定的类名.attr() 设置或返回匹配元素的属性和值.hasClass() 检查匹配的元素是否拥有指定的类.html() 设置或返回匹配的元素集合中的 HTM ...

  10. Swap Two Nodes in Linked List

    Given a linked list and two values v1 and v2. Swap the two nodes in the linked list with values v1 a ...