Onclick event, unable to change .CSS file using jQuery -
this question has answer here:
- change href of css link via jquery 3 answers
i trying switch css file click functionality. tried lot no gain :( style2.css not getting applied
<script type="text/javascript"> $(document).ready(function(){ $("#nav li a").click(function() { $("link").attr("href",$(this).attr('rel')); }); }); </script> <body> <ul id="nav"> <li class="original"><a href="#" rel="css/style1.css">original css</a></li> <li class="original"><a href="#" rel="css/style2.css">larger text</a></li> </ul> </body>
try this:
<!doctype html> <html lang=en-ca> <head> <meta charset=utf-8> <title>test</title> <link id='mainstylesheet' href='css/styles1.css' type='text/css' rel='stylesheet'> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <script> $(document).ready(function(){ $('nav a[href]').click(function(e){ e.preventdefault(); $('#mainstylesheet').prop('href', $(this).prop('href')); }); }); </script> </head> <nav> <ul> <li><a href='css/styles1.css'>original</a></li> <li><a href='css/styles2.css'>bigger</a></li> </ul> </nav>
notice have given id link
element, in order change href
property of that.
Comments
Post a Comment