javascript - jQuery 单击事件样式表更改不起作用

Question

jQuery 单击事件样式表更改不起作用。我正在尝试使用 jQuery 更改样式表，样式表正在更改但样式表属性不起作用。我该如何解决这个问题。

$(document).ready(function() {
$(".theme1").click(function() {
$("#switch").attr({href : "theme1.css"});
});
});

Answer 1

试试这个:

$('#toggleStyle').click(function (){
   $('link[href="style.css"]').attr('href','styleNew.css');
});

jsFiddle

如果你想在用户重新加载时保持新样式，你应该设置一个 cookie 来保持用户设置。

---

带有选择选项的多 CSS:

$('#ChangeStyle').change(function (){
    var val = $(this).val();
   $('link[rel="stylesheet"]').attr('href',val+'.css');
});

HTML:

<select id="ChangeStyle">
  <option value="Style1">Style 1</option>
  <option value="Style2">Style 2</option>
  <option value="Style3">Style 3</option>
</select>

---

带按钮的多 CSS:

$('.toggleStyle').each(function (){
$(this).click(function (){
    var rel = $(this).attr('rel');
   $('link[rel="stylesheet"]').attr('href',rel+'.css');
});
});

HTML:

<a class="toggleStyle" rel="Style1">Style 1</a>
<a class="toggleStyle" rel="Style2">Style 2</a>
<a class="toggleStyle" rel="Style3">Style 3</a>
<a class="toggleStyle" rel="Style4">Style 4</a>
<a class="toggleStyle" rel="Style5">Style 5</a>