JavaScript theme switcher issue
Question
I am creating a theme switcher , but currently it not switching between the style sheets.
I have the following code below and I want to switch between the stylesheet to apply the red or grey themes and grey is the default theme.
<link rel="stylesheet" title="red" href="css/red.css" type="text/css">
<link rel="stylesheet" title="blue" href="css/grey.css" type="text/css">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script language="javascript">
$(document).ready(function() {
$('#red').click(function (){
$('link[href="css/red.css"]').attr('href','css/red.css');
alert("red");
});
$('#grayscale').click(function (){
$('link[href="css/grey.css"]').attr('href','css/grey.css');
alert("grey");
});
});
</script>
</head>
<body>
<p> lorem ipsum lorem iuipsum </p>
<button id="original">Original</button><br />
<button id="grayscale">Grayscale</button>
<a href="#" id="red"> red</a>
<a href="#" id="grayscale"> grey</a>
1 answers
solution1
3 ACCPTED 2016-02-23 19:58:17
This doesn't actually modify anything:
$('link[href="css/red.css"]').attr('href','css/red.css');
It finds the link which links to red.css and... sets it to link to red.css . So, no change. It sounds like you meant to find the grey one and link it to red:
$('link[href="css/grey.css"]').attr('href','css/red.css');
And the same thing for the other line, of course:
$('link[href="css/red.css"]').attr('href','css/grey.css');
Additionally, you probably only want one link tag on the page. Having both means that both styles are always applied. So "switching" between them wouldn't make much sense.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.