基于JS实现简单的样式切换效果代码
更新时间：2026-05-11 00:34:15作者：fang
本文实例讲述了基于JS实现简单的样式切换效果。分享给大家供大家参考。具体如下：
这是一款基于JS实现简单的样式切换代码，自由切换CSS样式，很多大网站现在正在用，我觉得这是个挺实用的不错的功能，希望大家喜欢哦。
运行效果截图如下：
具体代码如下：
<!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程序设计有所帮助。
