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 loading效果代码
Jun 18 Javascript
JavaScript 实现模态对话框 源代码大全
May 02 Javascript
11款基于Javascript的文件管理器
Oct 25 Javascript
用Javascript来生成ftp脚本的小例子
Jul 03 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
Oct 22 Javascript
基于jQuery实现的QQ表情插件
Aug 25 Javascript
Bootstrap3 多个模态对话框无法显示的解决方案
Feb 23 Javascript
如何将你的AngularJS1.x应用迁移至React的方法
Feb 01 Javascript
vue解决使用webpack打包后keep-alive不生效的方法
Sep 01 Javascript
对于防止按钮重复点击的尝试详解
Apr 22 Javascript
微信小程序实现订单倒计时
Nov 01 Javascript
p5.js实现动态图形临摹
Oct 23 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
为什么《星际争霸》是测试人工智能的理想战场
2019/12/03 星际争霸
php中mysql模块部分功能的简单封装
2011/09/30 PHP
php分页示例分享
2014/04/30 PHP
php文件操作相关类实例
2015/06/18 PHP
WordPress中给媒体文件添加分类和标签的PHP功能实现
2015/12/31 PHP
ThinkPHP中create()方法自动验证表单信息
2017/04/28 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
原生javascript图片自动或手动切换示例附演示源码
2013/09/04 Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
2014/06/23 Javascript
基于jQuery实现的菜单切换效果
2015/10/16 Javascript
通过sails和阿里大于实现短信验证
2017/01/04 Javascript
VueJs使用Amaze ui调整列表和内容页面
2017/11/30 Javascript
vue 属性拦截实现双向绑定的实例代码
2018/10/24 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
2019/04/10 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
2019/05/12 Javascript
如何用原生js写一个弹窗消息提醒插件
2019/05/24 Javascript
Vue 中可以定义组件模版的几种方式
2019/08/06 Javascript
JS FormData对象使用方法实例详解
2020/02/12 Javascript
[50:24]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python每隔N秒运行指定函数的方法
2015/03/16 Python
用Python的Tornado框架结合memcached页面改善博客性能
2015/04/24 Python
Python合并两个字典的常用方法与效率比较
2015/06/17 Python
Python读取txt文件数据的方法(用于接口自动化参数化数据)
2018/06/27 Python
python数据预处理之数据标准化的几种处理方式
2019/07/17 Python
python3 pathlib库Path类方法总结
2019/12/26 Python
Pycharm生成可执行文件.exe的实现方法
2020/06/02 Python
python文件及目录操作代码汇总
2020/07/08 Python
python自动生成证件号的方法示例
2021/01/14 Python
python基于selenium爬取斗鱼弹幕
2021/02/20 Python
详解css3自定义滚动条样式写法
2017/12/25 HTML / CSS
说出你对remoting 和webservice的理解和应用
2014/06/08 面试题
预备党员承诺书
2014/03/25 职场文书
护士优质服务演讲稿
2014/08/26 职场文书
六查六看个人剖析材料
2014/10/14 职场文书
分家协议书范本
2016/03/22 职场文书
解决Django transaction进行事务管理踩过的坑
2021/04/24 Python