2016-02-23 6 views
1

Я создаю переключатель тем, но в настоящее время он не переключается между таблицами стилей.Редактор темы темы темы

У меня есть следующий код ниже, и я хочу переключиться между таблицей стилей, чтобы применить красные или серые темы, а серый - тема по умолчанию.

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

ответ

3

Это на самом деле не изменить что-либо:

$('link[href="css/red.css"]').attr('href','css/red.css'); 

Он находит link, которая связывает с red.css и ... устанавливает его для связи с red.css. Итак, никаких изменений. Похоже, вы означало найти серый один и связать его с красным:

$('link[href="css/grey.css"]').attr('href','css/red.css'); 

И то же самое для другой линии, конечно:

$('link[href="css/red.css"]').attr('href','css/grey.css'); 

Кроме того, вы, вероятно, (столичный округ) только link бирка на странице. Имея оба способа, оба стиля всегда применяются. Поэтому «переключение» между ними не имеет большого смысла.

+0

Я обновил свой код, он переключился на красный с оригинального серого. Но, похоже, он не переключается, когда я снова нажимаю на серый. – user244394

+2

@ user244394 Вы не должны редактировать свой вопрос, чтобы удалить исходную проблему. Этот ответ решает исходную проблему. Ваша новая проблема связана с тем, что таблица стилей была кэширована браузером, поэтому она не перезагружает ее. Добавление метки времени к URL-адресам ('' css/grey.css? _ = '+ Date.now() ') должно исправить это. –

+0

@MikeC: Будет ли кэширование действительно причиной такого поведения? Вы правы, что временная метка - отличный способ отключить кэширование других идемпотентных ресурсов. Но в этом случае они уже два разных URL-адреса для двух разных таблиц стилей. Интересно, может ли что-то другое ошибиться в настройке OP, которое мы могли бы не видеть в опубликованном примере. – David

Смежные вопросы