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 学习 - 提高篇
Feb 02 Javascript
javascript dom代码应用 简单的相册[firefox only]
Jun 12 Javascript
JQuery处理json与ajax返回JSON实例代码
Jan 03 Javascript
javascript写的一个模拟阅读小说的程序
Apr 04 Javascript
3种Jquery限制文本框只能输入数字字母的方法
Dec 03 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
Dec 19 Javascript
jQuery异步获取json数据方法汇总
Dec 22 Javascript
JavaScript数据类型详解
Apr 01 Javascript
JS使用eval解析JSON的注意事项分析
Nov 14 Javascript
js使用i18n实现页面国际化的方法
May 09 Javascript
Bootstrap Paginator+PageHelper实现分页效果
Dec 29 Javascript
easyUI 实现的后台分页与前台显示功能示例
Jun 01 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 的几个配置文件函数
2006/12/21 PHP
PHP中全局变量global和$GLOBALS[]的区别分析
2012/08/06 PHP
php导入csv文件碰到乱码问题的解决方法
2014/02/10 PHP
PHP性能优化大全(php.ini)
2016/05/20 PHP
jquery插件开发之实现jquery手风琴功能分享
2014/03/10 Javascript
javascript与css3动画结合使用小结
2015/03/11 Javascript
JS+DIV+CSS实现的经典标签切换效果代码
2015/09/14 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
2016/05/13 Javascript
JavaScript的==运算详解
2016/07/20 Javascript
微信小程序 保留小数(toFixed)详细介绍
2016/11/16 Javascript
基于jQuery实现Tabs选项卡自定义插件
2016/11/21 Javascript
vue2.0 与 bootstrap datetimepicker的结合使用实例
2017/05/22 Javascript
js移动端事件基础及常用事件库详解
2017/08/15 Javascript
JavaScript程序设计高级算法之动态规划实例分析
2017/11/24 Javascript
解决vue-cli webpack打包后加载资源的路径问题
2018/09/25 Javascript
在Vue里如何把网页的数据导出到Excel的方法
2020/09/30 Javascript
Python新手们容易犯的几个错误总结
2017/04/01 Python
python自定义异常实例详解
2017/07/11 Python
对pandas的dataframe绘图并保存的实现方法
2017/08/05 Python
pandas 实现字典转换成DataFrame的方法
2018/07/04 Python
对python判断ip是否可达的实例详解
2019/01/31 Python
Python零基础入门学习之输入与输出
2019/04/03 Python
Python一行代码解决矩阵旋转的问题
2019/11/30 Python
python实现快递价格查询系统
2020/03/03 Python
详解python 支持向量机(SVM)算法
2020/09/18 Python
Pycharm 解决自动格式化冲突的设置操作
2021/01/15 Python
英国著名的化妆品折扣网站:Allbeauty.com
2016/07/21 全球购物
小加工厂管理制度
2014/01/21 职场文书
中介公司区域经理岗位职责范本
2014/03/02 职场文书
中国好声音广告词
2014/03/18 职场文书
国庆节演讲稿
2014/05/27 职场文书
医学生求职信
2014/07/01 职场文书
发展党员工作情况汇报
2014/10/28 职场文书
小学运动会加油词
2015/07/18 职场文书
结婚典礼致辞
2015/07/28 职场文书
python开发实时可视化仪表盘的示例
2021/05/07 Python