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 结合C#后台的数组对文章的关键字自动添加链接的代码
Jul 15 Javascript
JS截取字符串常用方法详细整理
Oct 28 Javascript
JQuery调用WebServices的方法和4个实例
May 06 Javascript
javascript 应用小技巧方法汇总
Jul 05 Javascript
JavaScript节点及列表操作实例小结
Aug 05 Javascript
JavaScript创建对象的方式小结(4种方式)
Dec 17 Javascript
基于React.js实现原生js拖拽效果引发的思考
Mar 30 Javascript
AngularJs Scope详解及示例代码
Sep 01 Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
Sep 10 Javascript
javascript数组拍平方法总结
Jan 20 Javascript
深入理解JS中Number(),parseInt(),parseFloat()三者比较
Aug 24 Javascript
浅谈React中组件逻辑复用的那些事儿
May 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
用PHP生成html分页列表的代码
2007/03/18 PHP
PHP实现把MySQL数据库导出为.sql文件实例(仿PHPMyadmin导出功能)
2014/05/10 PHP
PHP生成网站桌面快捷方式代码分享
2014/10/11 PHP
深入浅析PHP无限极分类的案例教程
2016/05/09 PHP
php字符串比较函数用法小结(strcmp,strcasecmp,strnatcmp及strnatcasecmp)
2016/07/18 PHP
jquery BS,dialog控件自适应大小
2009/07/06 Javascript
jQuery中setTimeout的几种使用方法小结
2013/04/07 Javascript
JS控制文本框textarea输入字数限制的方法
2013/06/17 Javascript
js setTimeout 参数传递使用介绍
2013/08/13 Javascript
jquery实现可点击伸缩与展开的菜单效果代码
2015/08/31 Javascript
js实现四舍五入完全保留两位小数的方法
2016/08/02 Javascript
javascript 跨域问题以及解决办法
2017/07/17 Javascript
js实现扫雷源代码
2020/11/27 Javascript
python提示No module named images的解决方法
2014/09/29 Python
python实现在windows服务中新建进程的方法
2015/06/30 Python
Python面向对象之类的定义与继承用法示例
2019/01/14 Python
详解pandas如何去掉、过滤数据集中的某些值或者某些行?
2019/05/15 Python
Python爬虫使用浏览器cookies:browsercookie过程解析
2019/10/22 Python
python tkinter控件布局项目实例
2019/11/04 Python
使用python写一个自动浏览文章的脚本实例
2019/12/05 Python
Python利用逻辑回归分类实现模板
2020/02/15 Python
django使用JWT保存用户登录信息
2020/04/22 Python
keras 如何保存最佳的训练模型
2020/05/25 Python
编写html5时调试发现脚本php等网页js、css等失效
2013/12/31 HTML / CSS
检测浏览器对HTML5和CSS3支持度的方法
2015/06/25 HTML / CSS
英国最大的独立家具零售商:Furniture Village
2016/09/06 全球购物
摩顿布朗英国官方网上商店:奢华沐浴、身体和头发护理
2016/10/29 全球购物
龟牌英国商店:Turtle Wax Brand Store UK
2019/07/02 全球购物
Looking4Parking美国:全球排名第一的机场停车比较品牌
2019/08/26 全球购物
机械设计及其自动化求职推荐信
2014/02/17 职场文书
奥运会口号
2014/06/13 职场文书
2015年主婚人婚礼致辞
2015/07/28 职场文书
孩子满月酒答谢词
2015/09/30 职场文书
2016优秀护士先进个人事迹材料
2016/02/25 职场文书
对Keras自带Loss Function的深入研究
2021/05/25 Python
SQL中的三种去重方法小结
2021/11/01 SQL Server