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

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-simple-tab-cha-style-codes/

具体代码如下：

<!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程序设计有所帮助。

赞 (0)

相关推荐

  • 纯js实现背景图片切换效果代码

    html代码 复制代码 代码如下: <!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> <title>背景切

  • js实现简单的可切换选项卡效果

    js实现简单的可切换选项卡效果

    本文实例讲述了js实现简单的可切换选项卡效果的方法.分享给大家供大家参考.具体如下: 如图,最简单的纯粹的选项卡 第一步,当然是先写html代码和css样式 <!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>无标题文档</title> <style> body,ul,li{margin:0; padding:0; font:12

  • JS实现的样式切换功能tableCSS实例

    本文实例分析了JS实现的样式切换功能tableCSS.分享给大家供大家参考,具体如下: 把前阵子写的JQ插件函数(alterBgColor )改写成不基于JQ的代码,还添加了一个click样式效果 代码风格还是按照JQ插件风格来写,使用了闭包来循环设置TR元素的样式 function TableCss(options){ //如果没参数,就退出 if(arguments.length < 1 || !document.getElementById(options.tableName) ) { r

  • js判断样式className同时增加class或删除class

    复制代码 代码如下: function MyClass () {} MyClass.hasClassName = function(element, className) { if (!element) return; var elementClassName = element.className; if (elementClassName.length == 0) return false; //用正则表达式判断多个class之间是否存在真正的class(前后空格的处理) if (eleme

  • 一个js的tab切换效果代码[代码分离]

    支持自动播放 可定义鼠标事件延迟 不限制html结构 假设HTML如下: 复制代码 代码如下: <ul> <li id="t1">tab1</li> <li id="t2">tab2</li> <li id="t3">tab3</li> </ul> <div id="c1">content1</div> &l

  • 纯js无flash仿搜狐女人频道FLASH图片切换效果代码

    纯js无flash仿搜狐女人频道FLASH图片切换效果代码

    前2个星期看到一位朋友说如何用JS实现http://women.sohu.com/这个页中FLASH图片切换效果,这两天有空,做了一个,大家评评: [加载图片慢点请等会] www.jb51.net 我们 JS图片切换 :: * { margin:0; padding:0; } body { margin:0; color:#88c; background:#333; } img { margin:0; padding:0; border:0; } #js_F { position:relativ

  • JavaScript修改css样式style

    一.局部改变样式 分为改变直接样式,改变className和改变cssText三种.需要注意的是: 注意大小写: javascript对大小写十分敏感,className不能够把"N"写成"n",cssText也不能够把"T"写成"t",否则无法实现效果. 调用方法: 如果改变className,则事先在样式表中申明类,但调用时不要再跟style,像document.getElementById('obj').style.cl

  • 最简单的js图片切换效果实现代码

    无意中在网上发现的,代码非常的简单,一看就明白! 复制代码 代码如下: <script language =javascript > var curIndex=0; //时间间隔 单位毫秒 var timeInterval=5000; var arr=new Array(); arr[0]="1.jpg"; arr[1]="2.jpg"; arr[2]="3.jpg"; arr[3]="4.jpg"; arr[4]

  • 一段非常简单的让图片自动切换js代码

    复制代码 代码如下: <script language =javascript > var curIndex=0; //时间间隔 单位毫秒 var timeInterval=1000; var arr=new Array(); arr[0]="1.jpg"; arr[1]="2.jpg"; arr[2]="3.jpg"; arr[3]="4.jpg"; arr[4]="5.jpg"; arr[5

  • 一个精简的JS DIV层tab切换代码

    DIV层切换 function ChangeDiv(divId,divName,zDivCount) { for(i=0;i 内容一 内容二 内容三 内容部分第一区 内容部分第二区 内容部分第三区 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • css图片切换效果代码[不用js]

    css图片切换效果代码[不用js]

    纯css图切换 练习 教程来自snwebsite a{ display:block; border:1px solid #cccccc; width:20px; height:20px; margin:1px; } dl{ position:absolute; width:240px; height:170px; } dt{ position:absolute; right:1px; top:25px; } dd{ width:240px; height:170px; overflow:hidd

  • 基于jquery的tab切换 js原理

    基于jquery的tab切换 js原理

    html代码: 复制代码 代码如下: <div class="details"> <ul class="tab"><li class="on" rel="a1"><b>个人资料</b></li><li rel="a2"><b>帐号维护</b></li><li rel="a3

  • 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=&qu

随机推荐