文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用jquery动态切换样式表？

问如何使用jquery动态切换样式表？
EN

Stack Overflow用户

提问于 2012-03-22 14:32:07

回答 2查看 2.1K关注 0票数 1

嗨，我有一个页面，我有四个不同的样式表，就像这样

      <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 &raquo;</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 &raquo;</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&hellip;</a></li>
    </ul>
</li>
<li><a href="#"><span>Bookmarks</span></a></li>

这是我的dropdown类

     <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>

当我点击style-1等的时候，样式表应该是change .....How，我能用jquery做到这一点吗？有人能帮我吗？

请给我提供图书馆要用的地方？

javascript

html

css

jquery-ui

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-03-22 14:45:54

只需更改样式表的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'));
});

票数 0

Stack Overflow用户

发布于 2012-03-22 14:51:09

请尝试下面的方法，这样就可以了。请在此处查看演示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);
})

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/9817498

复制

相似问题

问如何使用jquery动态切换样式表？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用jquery动态切换样式表？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用jquery动态切换样式表？
EN