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 相关文章推荐
JavaScript实现从数组中选出和等于固定值的n个数
Sep 03 Javascript
Bootstrap每天必学之媒体对象
Nov 30 Javascript
使用JavaScript为Kindeditor自定义按钮增加Audio标签
Mar 18 Javascript
jQuery下拉菜单的实现代码
Nov 03 Javascript
Bootstrap面板(Panels)的简单实现代码
Mar 17 Javascript
vue.js获得当前元素的文字信息方法
Mar 09 Javascript
JavaScript类型相关的常用操作总结
Feb 14 Javascript
新手快速入门微信小程序组件库 iView Weapp
Jun 24 Javascript
vue.js实现回到顶部动画效果
Jul 31 Javascript
vue-form表单验证是否为空值的实例详解
Oct 29 Javascript
Vue+Element-UI实现上传图片并压缩
Nov 26 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
Apr 26 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
php接口和抽象类使用示例详解
2014/03/02 PHP
php+ajax实现图片文件上传功能实例
2014/06/17 PHP
解析PHP强制转换类型及远程管理插件的安全隐患
2014/06/30 PHP
Centos下升级php5.2到php5.4全记录(编译安装)
2015/04/03 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
jQuery使用手册之二 DOM操作
2007/03/24 Javascript
Javascript控制页面链接在新窗口打开具体方法
2013/08/16 Javascript
扩展JS Date对象时间格式化功能的小例子
2013/12/02 Javascript
解决JS请求服务器gbk文件乱码的问题
2015/10/16 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
2015/10/16 Javascript
Js实现简单的小球运动特效
2016/02/18 Javascript
Nodejs中 npm常用命令详解
2016/07/04 NodeJs
jQuery多个版本和其他js库冲突的解决方法
2016/08/11 Javascript
AngularJS 文件上传控件 ng-file-upload详解
2017/01/13 Javascript
jQuery实现鼠标经过显示动画边框特效
2017/03/24 jQuery
简单实现JS上传图片预览功能
2017/04/14 Javascript
vue缓存的keepalive页面刷新数据的方法
2019/04/23 Javascript
MySQL适配器PyMySQL详解
2017/09/20 Python
python利用正则表达式排除集合中字符的功能示例
2017/10/10 Python
SVM基本概念及Python实现代码
2017/12/27 Python
利用python提取wav文件的mfcc方法
2019/01/09 Python
python画双y轴图像的示例代码
2019/07/07 Python
python爬虫 urllib模块发起post请求过程解析
2019/08/20 Python
pytorch实现Tensor变量之间的转换
2020/02/17 Python
python 判断一组数据是否符合正态分布
2020/09/23 Python
Python通过getattr函数获取对象的属性值
2020/10/16 Python
python3代码输出嵌套式对象实例详解
2020/12/03 Python
The North Face北面德国官网:美国著名户外品牌
2018/12/12 全球购物
如何减少垃圾回收让内存更加有效使用
2013/10/18 面试题
奥利奥广告词
2014/03/20 职场文书
公司开业主持词
2015/07/02 职场文书
学校运动会通讯稿
2015/07/18 职场文书
2016年乡镇综治宣传月活动总结
2016/03/16 职场文书
2019最新版劳务派遣管理制度
2019/08/16 职场文书
解决jupyter notebook图片显示模糊和保存清晰图片的操作
2021/04/24 Python
铁头也玩根德 YachtBoy YB-230......
2022/04/05 无线电