CODEWITHSUNDEEP
jquerycss
Preston
Preston

Reputation: 53

How to change secondary stylesheet with Jquery?

I have my base.css and a red.css on my site.

I like do change red.css for blue.css when i press some button, without lost base.css how to do this? i have tried this:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

<script type="text/javascript">
    if($.cookie("css")) {
     $("link").attr("href",$.cookie("css"));
  }
$(document).ready(function(){  
    $("#troca_faccao").click(function() {
        $(this).parent().find("#painel_faccao").slideDown('fast').show(); //Drop down the subnav on click  
        $(this).hover(function() {
        }, function(){  
            $(this).parent().find("#painel_faccao").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up  
            });
        })
    $("#painel_faccao li a").click(function() { 
        $("link").attr("href",$(this).attr('rel'));
        $.cookie("css",$(this).attr('rel'), {expires: 365, path: '/'});
     return false;
  });
});
</script>

and div:

                        <div id="painel_faccao" style="display: none">
                        <p>A Escolha é Sua!</p>
                        <ul>
                            <li class="horda"><a href="#" rel="horde.css">HORDA</a></li> 
                            <li class="alianca"><a href="#" rel="aliance.css">ALIANÇA</a></li> 
                        </ul></div>

Upvotes: 5

Views: 598

Answers (2)

GSP
GSP

Reputation: 569

http://www.cssnewbie.com/simple-jquery-stylesheet-switcher/

tl;dr:

Somewhere in your HTML:

<link id="styles" rel="stylesheet" type="text/css" href="red.css" /> in HTML

Somewhere in your jQuery:

$("#styles").attr("href","blue.css");

Upvotes: 2

Sarfraz
Sarfraz

Reputation: 382696

You can use :eq filter selector or eq() method to target the stylesheet you want:

$("link:eq(0)").attr("href",$(this).attr('rel'));

Specify the position to eq for the stylesheet you want to change the href. Off course you want to change the href of link stylesheet pointing to red.css and not base.css

Alternatively, you can apply an id to the link stylesheet you want to change the href ofL

<link id="someID"............/>

And later do:

$("link#someID").attr("href",$(this).attr('rel'));

Upvotes: 3

Related Questions