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

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

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

运行效果截图如下：

在线演示地址如下：

具体代码如下：

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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;

}

.class1{ color:#FF0000}

.new1{ color:#996633}

.class2{ color:#FF0000}

.new2{ color:#996633}

JS实现样式切换

list1

list2

test1

test2

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