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 相关文章推荐
js常用代码段收集
Oct 28 Javascript
利用谷歌地图API获取点与点的距离的js代码
Oct 11 Javascript
jquery连缀语法如何实现
Nov 29 Javascript
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
Feb 05 Javascript
javascript中的document.open()方法使用介绍
Oct 09 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
Oct 11 Javascript
Jquery Ajax Error 调试错误的技巧
Nov 20 Javascript
js实现文本框输入文字个数限制代码
Dec 25 Javascript
详解react-router如何实现按需加载
Jun 15 Javascript
node.js中grunt和gulp的区别详解
Jul 17 Javascript
js实现圆形显示鼠标单击位置
Feb 11 Javascript
JavaScript oncopy事件用法实例解析
May 13 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实现替换手机号中间数字为*号及隐藏IP最后几位的方法
2016/11/16 PHP
Linux服务器下PHPMailer发送邮件失败的问题解决
2017/03/04 PHP
PHP实现网页内容html标签补全和过滤的方法小结【2种方法】
2017/04/27 PHP
Laravel框架自定义验证过程实例分析
2019/02/01 PHP
Laravel 自带的Auth验证登录方法
2019/09/30 PHP
PJBlog插件 防刷新的在线播放器
2006/10/25 Javascript
javascript中style.left和offsetLeft的用法说明
2014/03/07 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
2014/03/18 Javascript
javascript实现连续赋值
2015/08/10 Javascript
jquery.validate提示错误信息位置方法
2016/01/22 Javascript
Bootstrap源码解读导航条(7)
2016/12/23 Javascript
JavaScript实现大图轮播效果
2017/01/11 Javascript
Nodejs回调加超时限制两种实现方法
2017/06/09 NodeJs
深入理解vue-router之keep-alive
2017/08/31 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
2017/10/19 jQuery
用Python的Django框架编写从Google Adsense中获得报表的应用
2015/04/17 Python
Python自动化测试ConfigParser模块读写配置文件
2016/08/15 Python
Python中格式化format()方法详解
2017/04/01 Python
PYTHON基础-时间日期处理小结
2018/05/05 Python
Python对切片命名的实现方法
2018/10/16 Python
Python进程,多进程,获取进程id,给子进程传递参数操作示例
2019/10/11 Python
Python中lru_cache的使用和实现详解
2021/01/25 Python
经典团队口号
2014/06/06 职场文书
2014年学习厉行节约反对浪费思想汇报
2014/09/10 职场文书
大学运动会加油稿200字(5篇)
2014/09/27 职场文书
公司合并协议书范本
2014/09/30 职场文书
2014年督导工作总结
2014/11/19 职场文书
2014全年工作总结
2014/11/27 职场文书
优秀团员个人总结
2015/02/26 职场文书
个人年终总结开头
2015/03/06 职场文书
物业公司管理制度
2015/08/05 职场文书
redis 限制内存使用大小的实现
2021/05/08 Redis
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
2021/07/01 HTML / CSS
彻底解决MySQL使用中文乱码的方法
2022/01/22 MySQL
windows server2008 开启端口的实现方法
2022/06/25 Servers
Go语言编译原理之变量捕获
2022/08/05 Golang