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 相关文章推荐
asp(javascript)全角半角转换代码 dbc2sbc
Aug 06 Javascript
JavaScript Eval 函数使用
Mar 23 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
Jan 09 Javascript
JavaScript中的正则表达式简明总结
Apr 04 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
Aug 24 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
Oct 29 Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
Nov 15 Javascript
基于react框架使用的一些细节要点的思考
May 31 Javascript
深入理解Vue官方文档梳理之全局API
Nov 22 Javascript
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
在vue中使用防抖函数组件操作
Jul 26 Javascript
详解vue 中 scoped 样式作用域的规则
Sep 14 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
ThinkPHP CURD方法之where方法详解
2014/06/18 PHP
Yii2框架引用bootstrap中日期插件yii2-date-picker的方法
2016/01/09 PHP
php的优点总结 php有哪些优点
2019/07/19 PHP
javascript中将Object转换为String函数代码 (json str)
2012/04/29 Javascript
DIV+CSS+JS不间断横向滚动实现代码
2013/03/19 Javascript
Jquery对数组的操作技巧整理
2014/03/25 Javascript
jquery实现经典的淡入淡出选项卡效果代码
2015/09/22 Javascript
利用bootstrapValidator验证UEditor
2016/09/14 Javascript
jQuery快速高效制作网页交互特效
2017/02/24 Javascript
layui弹出层效果实现代码
2017/05/19 Javascript
JS解决position:sticky的兼容性问题的方法
2017/10/17 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
2018/09/27 Javascript
详解jenkins自动化部署vue
2019/05/14 Javascript
React如何实现浏览器打印部分内容详析
2019/05/19 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
2019/08/16 Javascript
生成无限制的微信小程序码的示例代码
2019/09/20 Javascript
ES6中Promise的使用方法实例总结
2020/02/18 Javascript
[03:02]2020完美世界城市挑战赛(秋季赛)总决赛回顾
2021/03/11 DOTA
Python进程通信之匿名管道实例讲解
2015/04/11 Python
Python实现字典的key和values的交换
2015/08/04 Python
Python处理json字符串转化为字典的简单实现
2016/07/07 Python
简单易懂的python环境安装教程
2017/07/13 Python
Python实现获取汉字偏旁部首的方法示例【测试可用】
2018/12/18 Python
使用python实现滑动验证码功能
2019/08/05 Python
Python xlrd模块导入过程及常用操作
2020/06/10 Python
如何设置PyCharm中的Python代码模版(推荐)
2020/11/20 Python
兰蔻加拿大官方网站:Lancome加拿大
2016/08/05 全球购物
世界上最好的儿童品牌:AlexandAlexa
2018/01/27 全球购物
英国知名美妆护肤在线商城:Zest Beauty
2018/04/24 全球购物
香港连卡佛百货官网:Lane Crawford
2019/09/04 全球购物
linux系统都有哪些运行级别
2016/03/26 面试题
大一学生职业生涯规划
2014/03/11 职场文书
整改落实情况汇报材料
2014/10/29 职场文书
《惊弓之鸟》教学反思
2016/02/20 职场文书
全国劳模先进事迹材料(2016精选版)
2016/02/25 职场文书
详解Redis的三种常用的缓存读写策略步骤
2022/05/06 Redis