stylesheetjquery插件buttonfunction文档<link>标签
rel="stylesheet"属性指定将一个样式表立即应用到文档.
rel="alternate stylesheet"属性将其作为备用样式表而在默认情况下禁用它
通过js拿到link标签对象,disabled属性设置,可以实现变化页面导入样式表
disabled = true;表示它不会立即生效
disabled = false;表示立即生效
本人用了jquery插件,使用方法如下:
第一步:定义多个样式表:
<link rel="alternate stylesheet" title="classic" href="css/style0.css" type="text/css" media="screen"/>
<link rel="alternate stylesheet" title="silver" href="css/style.css" type="text/css" media="screen"/>
<link rel="stylesheet" title="modern" href="css/style1.css" type="text/css" media="screen"/>
定义了3个外链样式表,其中使style1.css生效
第二步:定义转换按钮:
<p>
<button onclick="switchTheme('modern')"><img style="width:126px;height:66px" src="img/t1.png" alt="Modern"/></button>
<button onclick="switchTheme('silver')"><img style="width:126px;height:66px" src="img/t2.png" alt="Silver"/></button>
<button onclick="switchTheme('classic')"><img style="width:126px;height:66px" src="img/t3.png" alt="Classic"/></button>
</p>
第三部:定义相关的js
function switchTheme(t) {
$('link[title]').each(function(){
this.disabled = true;
this.disabled = (this.title != t);
});
return false;
};
分享到:
相关推荐
NULL 博文链接:https://zhang-yingjie-qq-com.iteye.com/blog/380416
<link rel="alternate stylesheet" type="text/css" href="Upimg/1024.css" title="1024 x 768" /> <script src="Upimg/jquery-1.1.3.1.pack.js" type="text/javascript"> <script src="Upimg/thickbox-compressed....
link media=”screen” href=”/css/blue.css” rel=”alternate stylesheet” type=”text/css” title=”blue” /> <link media=”screen” href=”/css/orange.css” rel=”alternate styles
<marquee behavior=alternate>...来回卷动 <marquee direction=down>...向下卷动 <marquee direction=up>...向上卷动 <marquee direction=right>向右卷动 <marquee direction=’left’>向左卷动 <marquee loop=...
简单CSS开关安装将下载到您的项目JavaScript文件夹中。HTML修改链接到CSS文件所有指向CSS主题的链接都必须具有〜class =“ s-... link class =" s-css-s--style " rel =" stylesheet alternate " title =" Red style "
<!... <head> <meta charset =“ utf-8” /&...link rel =” alternate icon“ type =” image / png“ href =” / assets / images / site / favicon.png“> <link rel =” icon“ type =“ image /
标签 功能 <marquee>...</marquee> 普通卷动 <marquee behavior=slide>...</marquee> 滑动 <marquee behavior=scroll>...</marquee> 预设卷动 <marquee behavior=alternate>...</marquee> 来回卷动 ...
wap2.0完整标签,基本全了 2.0标签(1) (marquee)...(/marquee)普通卷动 (marquee behavior=slide)...(/marquee)滑动 (marquee behavior=scroll)...(/marquee)预设卷动 (marquee behavior=alternate)...(/marquee)...
<marquee behavior=alternate>...来回卷动 <marquee direction=down>...向下卷动 <marquee direction=up>...向上卷动 <marquee direction=right>向右卷动 <marquee direction=’left’>向左卷动 <marquee loop=...
link rel=”alternate” type=”application/rss+xml” title=”RSS 2.0 – all posts” href=”http://blog.jb51.net/feed” /> <link rel=”alternate” type=”application/rss+xml” title=”RSS 2.0 – ...
<marquee behavior=alternate>...来回卷动 <marquee direction=down>...向下卷动 <marquee direction=up>...向上卷动 <marquee direction=right>向右卷动 <marquee direction=’left’>向左卷动
无刷新cookies切换样式示例代码实例主要用到的代码 代码如下:<... <head> <... charset=gb2312″> <...LINK title=blue href=”blue.css” type=text/css rel=”alternate styleshee
ubuntu-10.04-alternate-amd64.iso.torrent下载种子
”和“ link [rel = alternate]” valido all'interno della pagina网站attiva。 FUNZIONALITÀ-链接“正典”的倍数-Storico dei链接“正典”的unici-Correttore dei链接relativi-Ricerca di链接“另类”-链接的名称...
<marquee behavior=alternate>...来回卷动 <marquee direction=down>...向下卷动 <marquee direction=up>...向上卷动 <marquee direction=right>向右卷动 <marquee direction=’left’>向左卷动
link rel=alternate media=only screen and(max-width: 640px) href=http://pc_url > 在移动版网页(http://mobile_url) 上,所需的注释应为: <link rel=canonical href=http://mobile_url > 之前的Meta...
软工程课称内容<script id="allmobilize" charset="utf-8" src="http://a.yunshipei.com/77126665c1f3ae0b85e0fdaa7159a351/allmobilize.min.js"></script> ...<link rel="alternate" media="handheld" href="#" />
ubuntu12.04 alternate版图文安装教程.pdf