基于JS實現(xiàn)簡單的樣式切換效果代碼
更新時間：2015年09月04日 12:41:58 作者：企鵝
這篇文章主要介紹了基于JS實現(xiàn)簡單的樣式切換效果代碼,涉及簡單的javascript控制頁面元素樣式變換的技巧,非常簡單實用,需要的朋友可以參考下
本文實例講述了基于JS實現(xiàn)簡單的樣式切換效果。分享給大家供大家參考。具體如下：
這是一款基于JS實現(xiàn)簡單的樣式切換代碼，自由切換CSS樣式，很多大網(wǎng)站現(xiàn)在正在用，我覺得這是個挺實用的不錯的功能，希望大家喜歡哦。
運行效果截圖如下：
在線演示地址如下：
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實現(xiàn)樣式切換</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程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要介紹了JS簡單操作select和dropdownlist的方法,以實例形式講述了js針對服務(wù)器控件select和dropdownlist的讀寫操作方法,是js與.net交互的典型應(yīng)用實例,需要的朋友可以參考下2014-11-11
JavaScript對JSON數(shù)組簡單排序操作示例
這篇文章主要介紹了JavaScript對JSON數(shù)組簡單排序操作,結(jié)合實例形式分析了javascript使用sort()方法針對json數(shù)組元素排序的相關(guān)操作技巧與注意事項,需要的朋友可以參考下2019-01-01
ECMAScript6函數(shù)剩余參數(shù)（Rest Parameters）
這篇文章主要介紹了ECMAScript6函數(shù)剩余參數(shù)（Rest Parameters）的相關(guān)資料,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了詳解如何webpack使用DllPlugin，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了JS實現(xiàn)漂亮的時間選擇框效果,結(jié)合實例形式分析了javascript時間選擇框插件的實現(xiàn)與使用方法,需要的朋友可以參考下2016-08-08
中秋博餅習(xí)俗源于福建廈門，盛行于漳州的龍海、泉州的安海和金門縣等地。博餅的游戲規(guī)則簡單公平，既充滿競爭懸念，又富于生活情趣，本文將用JavaScript實現(xiàn)這一經(jīng)典游戲，感興趣的可以了解一下2022-09-09
js獲取元素到可視區(qū)的距離、瀏覽器窗口滾動距離及元素距離瀏覽器頂部距離
這篇文章主要給大家介紹了關(guān)于js獲取元素到可視區(qū)的距離、瀏覽器窗口滾動距離及元素距離瀏覽器頂部距離的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-11-11
Bootstrap，來自 Twitter，是目前最受歡迎的前端框架。本文給大家介紹BootStrap組件之輔組類與響應(yīng)式工具，感興趣的朋友一起學(xué)習(xí)吧2016-04-04
表格翻頁的實現(xiàn)方式有很多，下面以js為例為大家詳細(xì)介紹下表格翻頁效果的具體實現(xiàn)，感興趣的朋友可以參考下2013-08-08
requirejs是一個JavaScript文件和模塊加載器。requireJS允許你把你的javascript代碼獨立成文件和模塊，同時管理每個模塊間的依賴關(guān)系。本文主要對require.js的使用與工作原理進行系統(tǒng)介紹。需要的朋友來看下吧2016-12-12