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实现在小方框中浏览大图的代码
Aug 14 Javascript
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
Jun 21 Javascript
jquery $.each() 使用小探
Aug 23 Javascript
Google Maps API地图应用示例分享
Oct 23 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
Apr 12 Javascript
微信小程序 location API接口详解及实例代码
Oct 12 Javascript
js实现各种复制到剪贴板的方法(分享)
Oct 27 Javascript
vue组件中点击按钮后修改输入框的状态实例代码
Apr 14 Javascript
Vue学习笔记进阶篇之单元素过度
Jul 19 Javascript
超级简易的JS计算器实例讲解(实现加减乘除)
Aug 08 Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
浅谈一个webpack构建速度优化误区
Jun 24 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中将html中的br换行符转换为文本输入中的换行符
2013/03/26 PHP
PHP file_get_contents设置超时处理方法
2013/09/30 PHP
phpstorm编辑器乱码问题解决
2014/12/01 PHP
php隐藏实际地址的文件下载方法
2015/04/18 PHP
php版微信公众号接口实现发红包的方法
2016/10/14 PHP
Array, Array Constructor, for in loop, typeof, instanceOf
2011/09/13 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
2014/06/06 Javascript
JavaScript支持的最大递归调用次数分析
2014/06/24 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
2016/12/20 Javascript
JS实现双击内容变为可编辑状态
2017/03/03 Javascript
ES6新特性之模块Module用法详解
2017/04/01 Javascript
webpack2.0搭建前端项目的教程详解
2017/04/05 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
2017/10/17 Javascript
layer.open组件获取弹出层页面变量、函数的实例
2019/09/25 Javascript
js HTML DOM EventListener功能与用法实例分析
2020/04/27 Javascript
Python+Selenium自动化实现分页(pagination)处理
2017/03/31 Python
python 动态加载的实现方法
2017/12/22 Python
tensorflow识别自己手写数字
2018/03/14 Python
解决pandas read_csv 读取中文列标题文件报错的问题
2018/06/15 Python
Python3 读、写Excel文件的操作方法
2018/10/20 Python
Pycharm设置utf-8自动显示方法
2019/01/17 Python
浅析Python3中的对象垃圾收集机制
2019/06/06 Python
python框架django项目部署相关知识详解
2019/11/04 Python
Python使用QQ邮箱发送邮件报错smtplib.SMTPAuthenticationError
2019/12/20 Python
python颜色随机生成器的实例代码
2020/01/10 Python
Pytorch之扩充tensor的操作
2021/03/04 Python
用CSS3绘制三角形的简单方法
2015/07/17 HTML / CSS
林清轩官方网站:山茶花润肤油开创者
2016/10/26 全球购物
描述一下JVM加载class文件的原理机制
2013/12/08 面试题
建筑毕业生自我鉴定
2013/10/18 职场文书
模具专业毕业生自荐书范文
2014/02/19 职场文书
销售员求职个人的自我评价
2014/02/19 职场文书
小学评语大全
2014/04/22 职场文书
企业法人授权委托书范本
2014/09/23 职场文书
加薪申请书应该这样写!
2019/07/04 职场文书
什么是创业计划书?什么是商业计划书?这里一一解答
2019/07/12 职场文书