如何使用jquery动态切换样式表
How to switch style sheets dynamically using jquery?
嗨,我有一个页面,有四个不同的样式表,比如这个
<link rel="Stylesheet" href="fancydropdown.css" title="style-1" type="text/css" />
<link rel="Alternate" href="fancydropdown_1.css" title="style-2" type="text/css" />
<link rel="Alternate" href="fancydropdown_2.css" title="style-3" type="text/css" />
<link rel="Alternate" href="fancydropdown_3.css" title="style-4" type="text/css" />
这是我的HTML
<div id="menu">
<ul class="tabs">
<li><h4><a href="#">In the blog »</a></h4></li>
<li class="hasmore"><a href="#"><span>Styles</span></a>
<ul class="dropdown">
<li><a href="#" rel="style-1">style-1</a></li>
<li><a href="#" rel="style-2">style-2</a></li>
<li><a href="#" rel="style-3">style-3</a></li>
<li><a href="#" rel="style-4">style-4</a></li>
<li class="last"><a href="#">Menu item 6</a></li>
</ul>
</li>
<li class="hasmore"><a href="#"><span>Topics</span></a>
<ul class="dropdown">
<li><a href="#">Topic 1</a></li>
<li><a href="#">Topic 2</a></li>
<li><a href="#">Topic 3</a></li>
<li class="last"><a href="#">Topic 4</a></li>
</ul>
</li>
<li><h4><a href="#">Elsewhere »</a></h4></li>
<li><a href="#"><span>About</span></a></li>
<li class="hasmore"><a href="#"><span>Networks</span></a>
<ul class="dropdown">
<li><a href="#">Twitter</a></li>
<li><a href="#">posterous</a></li>
<li><a href="#">SpeakerSite</a></li>
<li><a href="#">LinkedIn</a></li>
<li class="last"><a href="#">See more…</a></li>
</ul>
</li>
<li><a href="#"><span>Bookmarks</span></a></li>
这是我的下拉类
<ul class="dropdown">
<li><a href="#" rel="style-1">style-1</a></li>
<li><a href="#" rel="style-2">style-2</a></li>
<li><a href="#" rel="style-3">style-3</a></li>
<li><a href="#" rel="style-4">style-4</a></li>
<li class="last"><a href="#">Menu item 6</a></li>
</ul>
当我点击样式-1等等时,样式表应该更改。。。。。如何使用jquery完成此操作?有人能帮我吗?
请给我图书馆的使用习惯?
您只需更改样式表的HREF。
... HEAD
<link rel="Stylesheet" href="style1.css" >
... BODY
<ul class="dropdown">
<li><a data-stylesheet="style1.css">style 1</a></li>
<li><a data-stylesheet="style2.css">style 2</a></li>
<li><a data-stylesheet="style3.css">style 3</a></li>
</ul>
... SCRIPT
$('.dropdown a').click(function(ev){
ev.preventDefault();
$('link').attr('href',$(this).data('stylesheet'));
});
请尝试以下操作,效果良好。请在此处查看演示http://jsfiddle.net/fLzck/
<ul class="dropdown">
<li><a href="#" rel="style-1.css">style-1</a></li>
<li><a href="#" rel="style-2.css">style-2</a></li>
<li><a href="#" rel="style-3.css">style-3</a></li>
<li><a href="#" rel="style-4.css">style-4</a></li>
<li class="last"><a href="#">Menu item 6</a></li>
</ul>
$(".dropdown a").click(function() {
var thisRel = $(this).attr('rel');
//alert(thisRel);
$("link[rel='stylesheet']").attr('href', thisRel);
})
相关文章:
- 对插件初始化后动态加载的元素进行样式设置
- 无法在有角度的谷歌地图中动态传递地图样式
- Javascript+动态菜单+当前链接样式(CSS)+基于PHP的网站
- 使用getElementById设置动态ID的输入字段的样式
- 动态添加的对象赢得't在javascript中拾取样式
- 在不同的域上动态加载样式表;不适用于Firefox
- 动态生成网格样式问题
- 如何刷新CSS,以便动态生成的元素可以被设置样式
- 如何根据浏览器宽度动态调整 css 样式表
- 如何动态覆盖内联样式
- 正在动态删除中的样式
- 将动态CSS样式应用于谷歌地图的标记
- 在动态添加的表行中丢失css样式
- 如何将 CSS 样式动态添加到 HEAD 标记
- 将 CSS 样式动态应用于特定元素
- 使用 css 类和正则表达式将样式动态应用于文本的各个部分
- 使用 Javascript 将样式动态添加到样式表,但我收到“无法读取未定义的属性'长度'”错误
- 样式动态表,TD固定宽度
- 样式 动态添加的表标题和列
- 使用jQuery Mobile样式动态添加文本框