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 AJAX实现目录浏览与编辑的代码
Oct 21 Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
Mar 14 Javascript
js 浏览器事件介绍
Mar 30 Javascript
js 利用image对象实现图片的预加载提高访问速度
Mar 29 Javascript
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
Jun 09 Javascript
js动态修改input输入框的type属性(实现方法解析)
Nov 13 Javascript
bootstrap table 服务器端分页例子分享
Feb 10 Javascript
js中跨域方法原理详解
Jul 19 Javascript
莱鸟介绍javascript onclick事件
Jan 06 Javascript
浅谈React深度编程之受控组件与非受控组件
Dec 26 Javascript
Vue 配合eiement动态路由,权限验证的方法
Sep 26 Javascript
Vue按时间段查询数据组件使用详解
Aug 21 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
BBS(php &amp; mysql)完整版(一)
2006/10/09 PHP
PHP抽奖算法程序代码分享
2015/10/08 PHP
PHP程序中使用adodb连接不同数据库的代码实例
2015/12/19 PHP
PHP获取昨天、今天及明天日期的方法
2016/02/03 PHP
javascript delete 使用示例代码
2010/03/29 Javascript
简单实用jquery版三级联动select示例
2013/07/04 Javascript
jquery中的查找parents与closest方法之间的区别
2013/12/02 Javascript
JavaScript里实用的原生API汇总
2015/05/14 Javascript
浅谈javascript的Array.prototype.slice.call
2015/08/31 Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
2016/03/07 Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
2016/04/18 Javascript
JS组件系列之JS组件封装过程详解
2017/04/28 Javascript
微信小程序实现tab切换效果
2017/11/21 Javascript
vue中v-for加载本地静态图片方法
2018/03/03 Javascript
vue的常用组件操作方法应用分析
2018/04/13 Javascript
Nodejs把接收图片base64格式保存为文件存储到服务器上
2018/09/26 NodeJs
详解在vue-test-utils中mock全局对象
2018/11/07 Javascript
详解JavaScript实现动态的轮播图效果
2019/04/29 Javascript
Vue父组件向子组件传值以及data和props的区别详解
2020/03/02 Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
2020/08/04 Javascript
vue $router和$route的区别详解
2020/12/02 Vue.js
[04:04]DOTA2亚洲邀请赛比赛场馆&酒店全攻略
2017/03/23 DOTA
[00:12]2018DOTA2亚洲邀请赛 Somnus丶M出阵单挑
2018/04/06 DOTA
PyMongo安装使用笔记
2015/04/27 Python
Python使用内置json模块解析json格式数据的方法
2017/07/20 Python
Python实现爬取需要登录的网站完整示例
2017/08/19 Python
用python制作游戏外挂
2018/01/04 Python
Python中enumerate()函数编写更Pythonic的循环
2018/03/06 Python
解析python实现Lasso回归
2019/09/11 Python
Python中Yield的基本用法
2020/10/18 Python
Python开发.exe小工具的详细步骤
2021/01/27 Python
去加拿大的旅行和假期:Canadian Affair
2016/10/25 全球购物
意大利中国电子产品购物网站:Geekmall.com
2019/09/30 全球购物
售房协议书
2014/08/19 职场文书
高中数学课堂教学反思
2016/02/18 职场文书
CSS文本阴影 text-shadow 悬停效果详解
2022/05/25 HTML / CSS