基于JS实现简单的样式切换效果代码


Posted in Javascript onSeptember 04, 2015

本文实例讲述了基于JS实现简单的样式切换效果。分享给大家供大家参考。具体如下:

这是一款基于JS实现简单的样式切换代码,自由切换CSS样式,很多大网站现在正在用,我觉得这是个挺实用的不错的功能,希望大家喜欢哦。

运行效果截图如下:

基于JS实现简单的样式切换效果代码

在线演示地址如下:

具体代码如下:

<!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=gb2312" />
<script language="javascript" type="text/javascript">
var lastObj=null;
var lastIdx=1;
function test(obj,idx){
 if(!lastObj){
 lastObj = document.getElementById("test");
 lastIdx = 1;
 }
 lastObj.className = "new"+lastIdx;
 var old = document.getElementById("list"+lastIdx);
 if(old)old.style.display="none";
 obj.className = "class"+idx;
 var n = document.getElementById("list"+idx);
 if(n)n.style.display="block";
 lastObj = obj;
 lastIdx = idx;
}
</script>
<style type="text/css">
 .class1{ color:#FF0000}
 .new1{ color:#996633}
 .class2{ color:#FF0000}
 .new2{ color:#996633}
</style>
<title>JS实现样式切换</title>
</head>
<body>
<a href="#" class="class1" id="test" onclick="test(this,1)">list1</a>
<a href="#" class="new2" onclick="test(this,2)">list2</a>
<div id="list1">
test1
</div>
<div id="list2" style="display:none">
test2
</div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
jquery select操作的日期联动实现代码
Dec 06 Javascript
使用javascript创建快捷方式的简单实例
Aug 09 Javascript
JS小功能(button选择颜色)简单实例
Nov 29 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
Dec 19 Javascript
vue-cli 引入、配置axios的方法
May 08 Javascript
详解.vue文件中style标签的几个标识符
Jul 17 Javascript
微信小程序中上传图片并进行压缩的实现代码
Aug 28 Javascript
vue 中使用 watch 出现了如下的报错的原因分析
May 21 Javascript
微信小程序页面滚动到指定位置代码实例
Sep 07 Javascript
JS实现基本的网页计算器功能示例
Jan 16 Javascript
封装Vue Element的table表格组件的示例详解
Aug 19 Javascript
React 条件渲染最佳实践小结(7种)
Sep 27 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
Sep 04 #Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
Sep 04 #Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
Sep 04 #Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
Sep 04 #Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
Sep 04 #Javascript
js实现网站最上边可关闭的浮动广告条代码
Sep 04 #Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
Sep 04 #Javascript
You might like
玛琪朵 Macchiato
2021/03/03 咖啡文化
PHP5函数小全(分享)
2013/06/06 PHP
php下载excel无法打开的解决方法
2013/12/24 PHP
xss防御之php利用httponly防xss攻击
2014/03/21 PHP
php实现refresh刷新页面批量导入数据的方法
2014/12/23 PHP
php模拟用户自动在qq空间发表文章的方法
2015/01/07 PHP
XHProf报告字段含义的解析
2016/05/17 PHP
PHP使用递归算法无限遍历数组示例
2017/01/13 PHP
PHP中quotemeta()函数的用法讲解
2019/04/04 PHP
php curl操作API接口类完整示例
2019/05/21 PHP
Gird事件机制初级读本
2007/03/10 Javascript
JS 日期验证正则附asp日期格式化函数
2009/09/11 Javascript
Js中setTimeout()和setInterval() 何时被调用执行的用法
2013/04/12 Javascript
动态标签 悬停效果 延迟加载示例代码
2013/11/21 Javascript
JavaScript函数的调用以及参数传递
2015/10/21 Javascript
基于javascript实现动态显示当前系统时间
2016/01/28 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
2016/08/19 Javascript
详解JS中遍历语法的比较
2017/04/07 Javascript
AngularJS监听ng-repeat渲染完成的两种方法
2018/01/16 Javascript
jQuery简单判断值是否存在于数组中的方法示例
2018/04/17 jQuery
对layui中表单元素的使用详解
2018/08/15 Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
2019/02/22 Javascript
vue+element表格导出为Excel文件
2019/09/26 Javascript
vue动态合并单元格并添加小计合计功能示例
2020/11/26 Vue.js
python在Windows8下获取本机ip地址的方法
2015/03/14 Python
Python线程中对join方法的运用的教程
2015/04/09 Python
python交互式图形编程实例(三)
2017/11/17 Python
python将字符串以utf-8格式保存在txt文件中的方法
2018/10/30 Python
Python如何爬取b站热门视频并导入Excel
2020/08/10 Python
基于Python中Remove函数的用法讨论
2020/12/11 Python
python 生成正态分布数据,并绘图和解析
2020/12/21 Python
FC-Moto瑞典:欧洲最大的摩托车服装和头盔商店之一
2018/11/27 全球购物
幼儿园三八妇女节活动方案
2014/03/11 职场文书
银行优秀员工事迹材料
2014/05/29 职场文书
转学证明范本
2015/06/19 职场文书
Python如何用re模块实现简易tokenizer
2022/05/02 Python