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打开图片另存为对话框实现代码
Dec 26 Javascript
JavaScript节点及列表操作实例小结
Aug 05 Javascript
javascript从定义到执行 你不知道的那些事
Jan 04 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
Feb 03 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)
May 11 Javascript
JS实现websocket长轮询实时消息提示的效果
Oct 10 Javascript
JavaScript生成指定范围的时间列表
Mar 19 Javascript
JS代码实现电脑配置检测功能
Mar 21 Javascript
浅谈在Vue.js中如何实现时间转换指令
Jan 06 Javascript
微信小程序常见页面跳转操作简单示例
May 01 Javascript
javascript实现弹幕墙效果
Nov 28 Javascript
JS实现炫酷轮播图
Nov 15 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/11/26 PHP
PHP删除数组中特定元素的两种方法
2013/07/02 PHP
PHP获取数组长度或某个值出现次数的方法
2015/02/11 PHP
php获得客户端浏览器名称及版本的方法(基于ECShop函数)
2015/12/23 PHP
php批量删除操作(数据访问)
2017/05/23 PHP
js判断运行jsp页面的浏览器类型以及版本示例
2013/10/30 Javascript
jQuery中:not选择器用法实例
2014/12/30 Javascript
Javascript中的方法和匿名方法实例详解
2015/06/13 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
2016/06/12 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
2016/09/21 Javascript
JavaScript之Vue.js【入门基础】
2016/12/06 Javascript
详解vue-router和vue-cli以及组件之间的传值
2017/07/04 Javascript
vue增删改查的简单操作
2017/07/15 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
2018/01/08 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
2018/12/30 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
2020/05/27 Javascript
Python设计模式之单例模式实例
2014/04/26 Python
Python访问MongoDB,并且转换成Dataframe的方法
2018/10/15 Python
如何实现Django Rest framework版本控制
2019/07/25 Python
python实现kNN算法识别手写体数字的示例代码
2019/08/16 Python
PYcharm 激活方法(推荐)
2020/03/23 Python
Python如何利用Har文件进行遍历指定字典替换提交的数据详解
2020/11/05 Python
CSS3的Border-radius轻松制作圆角
2012/12/24 HTML / CSS
如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度
2019/08/01 HTML / CSS
澳大利亚礼品篮网站:Macarthur Baskets
2019/10/14 全球购物
对于没有初始化的变量的初始值可以作怎样的假定
2014/10/12 面试题
高级文秘工作总结的自我评价
2013/09/28 职场文书
教师自荐信
2013/12/10 职场文书
优秀党员获奖感言
2014/02/18 职场文书
党的群众路线教育实践方案
2014/05/11 职场文书
幼儿园小班见习报告
2014/10/31 职场文书
文言文辞职信
2015/02/28 职场文书
会议主持词开场白
2015/05/28 职场文书
MySQL Threads_running飙升与慢查询的相关问题解决
2021/05/08 MySQL
mysql查询结果实现多列拼接查询
2022/04/03 MySQL
PyTorch中permute的使用方法
2022/04/26 Python