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
Oct 31 Javascript
jQuery 在光标定位的地方插入文字的插件
May 10 Javascript
JavaScript面向对象之Prototypes和继承
Jul 12 Javascript
两种常用的javascript数组去重方法思路及代码
Mar 26 Javascript
快速查找数组中的某个元素并返回下标示例
Sep 03 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
Feb 05 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
Feb 24 Javascript
Javascript json object 与string 相互转换的简单实现
Sep 27 Javascript
vue-cli配置文件——config篇
Jan 04 Javascript
Vue + better-scroll 实现移动端字母索引导航功能
May 07 Javascript
详解vue组件中使用路由方法
Feb 12 Javascript
微信小程序点击列表跳转到对应详情页过程解析
Sep 26 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
一个没有MYSQL数据库支持的简易留言本的编写
2006/10/09 PHP
php执行sql语句的写法
2009/03/10 PHP
php 文件缓存函数
2011/10/08 PHP
php运行报错Call to undefined function curl_init()的最新解决方法
2016/11/20 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
2007/03/10 Javascript
有关DOM元素与事件的3个谜题
2010/11/11 Javascript
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
2012/01/15 Javascript
文本域中换行符的替换示例
2014/03/04 Javascript
jqGrid读取选择的多行的某个属性代码
2014/05/18 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
2014/06/13 Javascript
javascript 应用小技巧方法汇总
2015/07/05 Javascript
浅析JavaScript Array和string的转换(推荐)
2016/05/20 Javascript
简易的JS计算器实现代码
2016/10/18 Javascript
jquery实现图片列表鼠标移入微动
2016/12/01 Javascript
原生js jquery ajax请求以及jsonp的调用方法
2017/08/04 jQuery
关于webpack2和模块打包的新手指南(小结)
2017/08/07 Javascript
使用veloticy-ui生成文字动画效果
2018/02/08 Javascript
在vue中使用vue-echarts-v3的实例代码
2018/09/13 Javascript
layui之数据表格--与后台交互获取数据的方法
2019/09/29 Javascript
vue.config.js常用配置详解
2019/11/14 Javascript
[09:23]国际邀请赛采访专栏:iG战队VK,Tongfu战队Cu
2013/08/05 DOTA
Python读写文件方法总结
2015/06/09 Python
Python实现随机生成手机号及正则验证手机号的方法
2018/04/25 Python
python reverse反转部分数组的实例
2018/12/13 Python
python如何快速拼接字符串
2020/10/28 Python
CSS3 创建网页动画实现弹跳球动效果
2018/10/30 HTML / CSS
远程Wi-Fi宠物监控相机:Petcube
2017/04/26 全球购物
保加利亚运动鞋购物网站:SneakerStudio.bg
2020/12/23 全球购物
摄影实习自我鉴定
2013/09/20 职场文书
财政局长自荐信范文
2013/12/22 职场文书
2014年教师节活动总结
2014/08/29 职场文书
房地产公司工程部经理岗位职责
2015/04/09 职场文书
公司职员入党自传书
2015/06/26 职场文书
2015年幼儿园师德师风建设工作总结
2015/10/23 职场文书
班主任培训研修日志
2015/11/13 职场文书
解除租赁合同协议书
2016/03/21 职场文书