如果通过改变当前作用样式表的地址的方法,可能会有下载和应用样式表的时间延迟,我们可以充分利用 link 的rel 属性来设置当前哪个样式表是起作用的,哪些是备用的:
<
link
type
="text/css"
rel
="alternate"
id
="c0"
href
="style/style09f.css"
media
="all"
/>
<!--
备用样式表
-->
< link type ="text/css" rel ="alternate" id ="c1" href ="style/style390.css" media ="all" />
< link type ="text/css" rel ="alternate" id ="c2" href ="style/stylec00.css" media ="all" />
< link type ="text/css" rel ="alternate" id ="c3" href ="style/stylef60.css" media ="all" />
< link type ="text/css" rel ="alternate" id ="c4" href ="style/stylef39.css" media ="all" />
< link type ="text/css" rel ="stylesheet" id ="mc" href ="style/style.css" media ="all" title ="主样式" /> <!-- 当前样式表 -->
< link type ="text/css" rel ="alternate" id ="c1" href ="style/style390.css" media ="all" />
< link type ="text/css" rel ="alternate" id ="c2" href ="style/stylec00.css" media ="all" />
< link type ="text/css" rel ="alternate" id ="c3" href ="style/stylef60.css" media ="all" />
< link type ="text/css" rel ="alternate" id ="c4" href ="style/stylef39.css" media ="all" />
< link type ="text/css" rel ="stylesheet" id ="mc" href ="style/style.css" media ="all" title ="主样式" /> <!-- 当前样式表 -->
rel="alternate" 是备用的样式表, rel="stylesheet" 则是当前作用的样式表,通过切换 rel="stylesheet" 的样式表的地址即可。
<
div
class
="colors"
id
="colors"
>
< span class ="c4" > </ span >
< span class ="c3" > </ span >
< span class ="c2" > </ span >
< span class ="c1" > </ span >
< span class ="c0" > </ span >
</ div >
< span class ="c4" > </ span >
< span class ="c3" > </ span >
< span class ="c2" > </ span >
< span class ="c1" > </ span >
< span class ="c0" > </ span >
</ div >
$(document).ready(
function
(){
// code goes here
$( " #colors " ).find( " span " ).click(
function (){
var cid = $( this ).attr( " class " );
var chr = $( " # " + cid).attr( " href " );
$( " #mc " ).attr( " href " ,chr);
}
)
})
// code goes here
$( " #colors " ).find( " span " ).click(
function (){
var cid = $( this ).attr( " class " );
var chr = $( " # " + cid).attr( " href " );
$( " #mc " ).attr( " href " ,chr);
}
)
})