js导航栏单击事件背景变换示例代码


Posted in Javascript onJanuary 13, 2014

如下所示;

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function change_bg(obj)
{
    var a=document.getElementById("Menu").getElementsByTagName("a");
    for(var i=0;i<a.length;i++)
    {
        a[i].className="";
    }
    obj.className="current";
}
</script>
<style type="text/css">
body{
    font-size:17px;    
}
.current{
    background:red;    
}
#container ul
{
    list-style-type:none;
}
#container ul li
{
    float:left;
    margin-right:3px;
}
#container ul li a{
text-decoration:none;
color:#000;
}
</style>
</head>
<body>
<div id="container">
<ul id="Menu">
<li><a href="javascript:" onclick="change_bg(this)" class="current">Menu1</a></li>
<li><a href="javascript:" onclick="change_bg(this)">Menu2</a></li>
<li><a href="javascript:" onclick="change_bg(this)">Menu3</a></li>
<li><a href="javascript:" onclick="change_bg(this)">Menu4</a></li>
<li><a href="javascript:" onclick="change_bg(this)">Menu5</a></li>
</ul>
</div>
</body>
</html>
Javascript 相关文章推荐
jquery 事件对象属性小结
Apr 27 Javascript
一个简单的全屏图片上下打开显示网页效果示例
Jul 08 Javascript
jquery实现邮箱自动填充提示功能
Nov 17 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
Jul 24 Javascript
给easyui的datebox控件添加清空按钮的实现方法
Nov 09 Javascript
浅析js的模块化编写 require.js
Dec 07 Javascript
jQuery ajax的功能实现方法详解
Jan 06 Javascript
JavaScript实现翻页功能(附效果图)
Feb 16 Javascript
JS ES6多行字符串与连接字符串的表示方法
Apr 26 Javascript
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
Jul 27 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
Oct 14 Javascript
基于JavaScript实现年月日三级联动
Jun 22 Javascript
JS文本获得焦点清除文本文字的示例代码
Jan 13 #Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
Jan 13 #Javascript
parentElement,srcElement的使用小结
Jan 13 #Javascript
javaScript中的this示例学习详解及工作原理
Jan 13 #Javascript
JS 日期比较大小的简单实例
Jan 13 #Javascript
JS之Date对象和获取系统当前时间详解
Jan 13 #Javascript
JS OffsetParent属性深入解析
Jan 13 #Javascript
You might like
乱谈我对耳机、音箱的感受
2021/03/02 无线电
PHP-redis中文文档介绍
2013/02/07 PHP
PHP设置images目录不充许http访问的方法
2016/11/01 PHP
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
2006/12/22 Javascript
Javascript 判断函数类型完美解决方案
2009/09/02 Javascript
Mootools 1.2教程 类(一)
2009/09/15 Javascript
js getBoundingClientRect() 来获取页面元素的位置
2010/11/25 Javascript
ajax上传时参数提交不更新等相关问题
2012/12/11 Javascript
node.js中的fs.statSync方法使用说明
2014/12/16 Javascript
js判断某个方法是否存在实例代码
2015/01/10 Javascript
canvas实现环形进度条效果
2017/03/23 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
2017/11/06 Javascript
jQuery实现checkbox的简单操作
2017/11/18 jQuery
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
2018/01/16 Javascript
使用Vue开发一个实时性时间转换指令
2018/01/17 Javascript
小程序api实现promise封装过程解析
2019/11/21 Javascript
[01:00:54]TI4正赛第二日开场
2014/07/20 DOTA
使用Python解析JSON数据的基本方法
2015/10/15 Python
WINDOWS 同时安装 python2 python3 后 pip 错误的解决方法
2017/03/16 Python
Python实现的用户登录系统功能示例
2018/02/05 Python
Python+Pandas 获取数据库并加入DataFrame的实例
2018/07/25 Python
解决Python plt.savefig 保存图片时一片空白的问题
2019/01/10 Python
Scrapy框架实现的登录网站操作示例
2020/02/06 Python
python实现登录与注册系统
2020/11/30 Python
解决PDF 转图片时丢文字的一种可能方式
2021/03/04 Python
详解Css3新特性应用之过渡与动画
2017/01/10 HTML / CSS
澳大利亚UGG工厂直销:Australian Ugg Boots
2017/10/14 全球购物
屈臣氏乌克兰:Watsons UA
2019/10/29 全球购物
小学教学随笔感言
2014/02/26 职场文书
小学开学典礼主持词
2014/03/19 职场文书
《少年王冕》教学反思
2014/04/11 职场文书
党员教师批评与自我批评发言稿
2014/10/15 职场文书
《地震中的父与子》教学反思
2016/02/16 职场文书
Golang 1.18 多模块Multi-Module工作区模式的新特性
2022/04/11 Golang
pandas中pd.groupby()的用法详解
2022/06/16 Python
SpringBoot项目部署到阿里云服务器的实现步骤
2022/06/28 Java/Android