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学习笔记9 prototype封装继承
Jan 11 Javascript
Jquery中find与each方法用法实例
Feb 04 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
Dec 04 Javascript
JS+CSS3实现超炫的散列画廊特效
Jul 16 Javascript
Angular 理解module和injector,即依赖注入
Sep 07 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
Dec 02 Javascript
jquery仿ps颜色拾取功能
Mar 08 Javascript
JSON数据中存在单个转义字符“\”的处理方法
Jul 11 Javascript
Async/Await替代Promise的6个理由
Jun 15 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
Jul 19 Javascript
使用vue打包进行云服务器上传的问题
Mar 02 Javascript
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
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
中英文字符串翻转函数
2008/12/09 PHP
浅析application/x-www-form-urlencoded和multipart/form-data的区别
2014/06/22 PHP
php实现以只读方式打开文件的方法
2015/03/16 PHP
php修改文件上传限制方法汇总
2015/04/07 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
简明json介绍
2008/09/28 Javascript
关于B/S判断浏览器断开的问题讨论
2008/10/29 Javascript
详解JavaScript语法对{}处理的坑爹之处
2014/06/05 Javascript
js获取会话框prompt的返回值的方法
2015/01/10 Javascript
jQuery中triggerHandler()方法用法实例
2015/01/19 Javascript
详解AngularJS中的作用域
2015/06/17 Javascript
javascript+ajax实现产品页面加载信息
2015/07/09 Javascript
JS通过Cookie判断页面是否为首次打开
2016/02/05 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
2016/08/10 Javascript
BOM系列第二篇之定时器requestAnimationFrame
2016/08/17 Javascript
详解vue.js组件化开发实践
2016/12/14 Javascript
JS搜狐面试题分析
2016/12/16 Javascript
jQuery纵向导航菜单效果实现方法
2016/12/19 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
2017/06/12 jQuery
js 中rewrap-ajax.js插件实例代码
2017/10/20 Javascript
vue2.0使用v-for循环制作多级嵌套菜单栏
2018/06/25 Javascript
NodeJs 模仿SIP话机注册的方法
2019/06/21 NodeJs
vue分页插件的使用方法
2019/12/25 Javascript
基于vue--key值的特殊用处详解
2020/07/31 Javascript
js实现简易ATM功能
2020/10/27 Javascript
Python2.7下安装Scrapy框架步骤教程
2017/12/22 Python
Python 获取主机ip与hostname的方法
2018/12/17 Python
python print出共轭复数的方法详解
2019/06/25 Python
Flask中jinja2的继承实现方法及实例
2021/03/03 Python
html5使用Drag事件编辑器拖拽上传图片的示例代码
2017/08/22 HTML / CSS
内科护士实习自我鉴定
2013/10/17 职场文书
化工专业自荐书
2014/06/16 职场文书
2014最新党员违纪检讨书
2014/10/12 职场文书
《将心比心》教学反思
2016/02/23 职场文书
面试分析分布式架构Redis热点key大Value解决方案
2022/03/13 Redis
Windows10安装Apache2.4的方法步骤
2022/06/25 Servers