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二级导航内容均分的原理及实现
Aug 13 Javascript
Js获取下拉框选定项的值和文本的实现代码
Feb 26 Javascript
javascript写的一个模拟阅读小说的程序
Apr 04 Javascript
js中substring和substr的定义和用法
May 05 Javascript
原生js实现数字字母混合验证码的简单实例
Dec 10 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
Feb 02 Javascript
layui选项卡效果实现代码
May 19 Javascript
JS实现百度搜索接口及链接功能实例代码
Feb 02 Javascript
微信小程序实现漂亮的弹窗效果
May 26 Javascript
vue实现固定位置显示功能
May 30 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
Sep 05 Javascript
浅谈js中的attributes和Attribute的用法与区别
Jul 16 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
discuz论坛 用户登录 后台程序代码
2008/11/27 PHP
php实例分享之html转为rtf格式
2014/06/02 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
详解Yaf框架PHPUnit集成测试方法
2017/12/27 PHP
可以支持多中格式的JS键盘
2007/05/02 Javascript
javascript 关于# 和 void的区别分析
2009/10/26 Javascript
新老版本juqery获取radio对象的方法
2010/03/01 Javascript
IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结
2012/05/14 Javascript
jquery 新建的元素事件绑定问题解决方案
2014/06/12 Javascript
IE6浏览器中window.location.href无效的解决方法
2014/11/20 Javascript
javascript中类的定义方式详解(四种方式)
2015/12/22 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
2016/08/25 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
2016/10/25 Javascript
微信小程序 数据遍历的实现
2017/04/05 Javascript
JS中的数组转变成JSON格式字符串的方法
2017/05/09 Javascript
原生JS实现N级菜单的代码
2017/05/21 Javascript
原生js实现简单的模态框示例
2017/09/08 Javascript
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
2017/12/24 Javascript
Router解决跨模块下的页面跳转示例
2018/01/11 Javascript
微信小程序如何实现全局重新加载
2019/06/05 Javascript
[48:48]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Dream TIME
2014/05/21 DOTA
python 读写中文json的实例详解
2017/10/29 Python
Python 调用PIL库失败的解决方法
2019/01/08 Python
Python实现多态、协议和鸭子类型的代码详解
2019/05/05 Python
python列表每个元素同增同减和列表元素去空格的实例
2019/07/20 Python
用纯css3和html制作泡沫对话框实现代码
2013/03/21 HTML / CSS
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
2013/01/09 HTML / CSS
525心理活动总结
2014/07/04 职场文书
新郎婚礼答谢词
2015/01/04 职场文书
高老头读书笔记
2015/06/30 职场文书
爱心捐赠活动简讯
2015/07/20 职场文书
2016入党积极分子考察评语
2015/12/01 职场文书
因个人工作失误检讨书
2019/06/21 职场文书
Java实现房屋出租系统详解
2021/10/05 Java/Android
Python+Matplotlib图像上指定坐标的位置添加文本标签与注释
2022/04/11 Python
Android移动应用开发指南之六种布局详解
2022/09/23 Java/Android