基于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 高亮显示文本中重要的关键字
Dec 24 Javascript
在JavaScript中获取请求的URL参数
Dec 22 Javascript
js 获取和设置css3 属性值的实现方法
May 06 Javascript
jquery定时滑出可最小化的底部提示层特效代码
Oct 02 Javascript
AngularJS 基础ng-class-even指令用法
Aug 01 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
Nov 20 Javascript
微信小程序中做用户登录与登录态维护的实现详解
May 17 Javascript
jQuery实现使用sort方法对json数据排序的方法
Apr 17 jQuery
vue中关闭eslint的方法分析
Aug 04 Javascript
JavaScript使用prototype原型实现的封装继承多态示例
Aug 31 Javascript
js实现表格数据搜索
Aug 09 Javascript
Ajax实现局部刷新的方法实例
Mar 31 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
如何在PHP程序中防止盗链
2008/04/09 PHP
PHP面向对象的进阶学习(抽像类、接口、final、类常量)
2012/05/07 PHP
smarty内置函数{loteral}、{ldelim}和{rdelim}用法实例
2015/01/22 PHP
php无限分类使用concat如何实现
2015/11/05 PHP
PHP框架自动加载类文件原理详解
2017/06/06 PHP
windows 2008r2+php5.6.28环境搭建详细过程
2019/06/18 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
xml 封装与解析(javascript和C#中)
2009/07/26 Javascript
JavaScript Event学习第六章 事件的访问
2010/02/07 Javascript
FileUpload 控件 禁止手动输入或粘贴的实现代码
2010/04/07 Javascript
JavaScript基本编码模式小结
2012/05/23 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
2013/11/19 Javascript
javascript属性访问表达式用法分析
2015/04/25 Javascript
JavaScript中的Promise使用详解
2015/06/24 Javascript
javascript实现动态导入js与css等静态资源文件的方法
2015/07/25 Javascript
jQuery实现右下角可缩放大小的层完整实例
2016/06/20 Javascript
jQuery中text() val()和html()的区别实例详解
2016/06/28 Javascript
vue里面使用mui的弹出日期选择插件实例
2018/09/16 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
2020/09/16 Javascript
[03:56]还原FTP电影首映式 DOTA2群星拼出遗迹世界
2014/03/26 DOTA
[02:09]DOTA2辉夜杯 EHOME夺冠举杯现场
2015/12/28 DOTA
python之wxPython应用实例
2014/09/28 Python
在Python程序中操作文件之flush()方法的使用教程
2015/05/24 Python
在windows系统中实现python3安装lxml
2016/03/23 Python
浅谈Python处理PDF的方法
2017/11/10 Python
python 实现数字字符串左侧补零的方法
2018/12/04 Python
pycharm 安装JPype的教程
2019/08/08 Python
HTML5实现桌面通知 提示功能
2017/10/11 HTML / CSS
C语言面试题
2013/05/19 面试题
一篇.NET面试题
2014/09/29 面试题
自荐书模板
2013/12/19 职场文书
中学教师暑期培训方案
2014/08/27 职场文书
2014年体育部工作总结
2014/11/13 职场文书
心灵点滴观后感
2015/06/02 职场文书
村主任当选感言
2015/08/01 职场文书
bose降噪耳机音能消除人声吗
2022/04/19 数码科技