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 相关文章推荐
HTTP状态代码以及定义(解释)
Feb 02 Javascript
jquery高效反选具体实现
May 05 Javascript
JavaScript简单修改窗口大小的方法
Aug 03 Javascript
jqGrid中文文档之选项设置
Dec 02 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
Jan 26 Javascript
关于Node.js的events.EventEmitter用法介绍
Apr 01 Javascript
浅谈关于axios和session的一些事
Jul 13 Javascript
JavaScript获取用户所在城市及地理位置
Apr 21 Javascript
JavaScript折半查找(二分查找)算法原理与实现方法示例
Aug 06 Javascript
详谈js的变量提升以及使用方法
Oct 06 Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
Oct 18 Javascript
jQuery zTree插件快速实现目录树
Aug 16 jQuery
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
?繁体转换的class
2006/10/09 PHP
完美解决:Apache启动问题―(OS 10022)提供了一个无效的参数
2013/06/08 PHP
ThinkPHP3.1新特性之命名范围的使用
2014/06/19 PHP
详解 PHP加密解密字符串函数附源码下载
2015/12/18 PHP
PHP经典实用正则表达式小结
2017/05/04 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
PHP开发API接口签名生成及验证操作示例
2020/05/27 PHP
JavaScript版代码高亮
2006/06/26 Javascript
JavaScript语句可以不以;结尾的烦恼
2007/03/08 Javascript
javascript基础知识大集锦(二) 推荐收藏
2011/01/13 Javascript
对new functionName()定义一个函数的理解
2014/05/22 Javascript
javascript移动设备Web开发中对touch事件的封装实例
2014/06/05 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
2014/11/12 Javascript
JS实现的生成随机数的4个函数分享
2015/02/11 Javascript
javascript带回调函数的异步脚本载入方法实例分析
2015/07/02 Javascript
js带点自动图片轮播幻灯片特效代码分享
2015/09/07 Javascript
jquery实现多次上传同一张图片
2017/01/09 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
2017/08/03 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
2018/07/25 Javascript
原生JS实现pc端轮播图效果
2020/12/21 Javascript
[03:49]2016完美“圣”典风云人物:AMS专访
2016/12/06 DOTA
python编写简单爬虫资料汇总
2016/03/22 Python
玩转python selenium鼠标键盘操作(ActionChains)
2020/04/12 Python
基于Python实现的微信好友数据分析
2018/02/26 Python
详解python深浅拷贝区别
2019/06/24 Python
python选取特定列 pandas iloc,loc,icol的使用详解(列切片及行切片)
2019/08/06 Python
win10下安装Anaconda的教程(python环境+jupyter_notebook)
2019/10/23 Python
将keras的h5模型转换为tensorflow的pb模型操作
2020/05/25 Python
python Xpath语法的使用
2020/11/26 Python
Pytorch 图像变换函数集合小结
2021/02/01 Python
英国轻奢珠宝品牌:Astley Clarke
2016/12/18 全球购物
玛蒂尔达简服装:Matilda Jane Clothing
2019/02/13 全球购物
展会邀请函范文
2014/01/26 职场文书
小学生放飞梦想演讲稿
2014/08/26 职场文书
普通党员对照检查材料
2014/08/28 职场文书