使用jQuery和下拉菜單的簡單樣式表切換器

目前，我有一個樣式表切換器，它使用javascript來加載新的樣式表，該樣式表基於在下拉菜單中進行的選擇。使用jQuery和下拉菜單的簡單樣式表切換器

我想重新編寫代碼來使用jQuery而不是javascript。誰能幫我？我瀏覽過jQuery解決方案，雖然有很多，但不使用下拉菜單。這是我的代碼：

<head> 

<link href="colour/light.css" rel="stylesheet" type="text/css"> 

<script type="text/javascript"> 
function changeScheme() 
{ var _head = document.getElementsByTagName('head')[0]; 
    var _link = document.createElement('link'); 
_link.type = 'text/css'; 
_link.href = colour.colour.options[colour.colour.selectedIndex].value; 
_link.rel = 'stylesheet'; 
_head.appendChild(_link); 
} 
</script> 

</head> 
<body> 

<form action="#" name="colour" id="colour" onsubmit="return false;"> 
       <select name="colour" onchange="changeScheme();"> 
       <option value="colour/light.css">Light scheme</option> 
       <option value="colour/dark.css">Dark scheme</option> 
       </select> 
      </form> 

</body>

感謝您的幫助！

來源

2012-04-05 Miro

<head> 

<link href="colour/light.css" rel="stylesheet" type="text/css" id="stylelink"> 

<script type="text/javascript"> 
function changeScheme() 
{ 
    $('#stylelink').attr('href',$('#colourselector').val()); 
} 
</script> 

</head> 
<body> 

    <form action="#" name="colour" id="colour" onsubmit="return false;"> 
      <select id="colourselector" name="colour" onchange="changeScheme();"> 
      <option value="colour/light.css">Light scheme</option> 
      <option value="colour/dark.css">Dark scheme</option> 
      </select> 
    </form> 
</body>

來源

2012-04-05 09:21:14 skafandri

謝謝你，它看起來像它應該工作，但它仍然不...林不知道爲什麼.. – Miro 2012-04-05 09:47:22

另外，是的，我包括jQuery的頭... – Miro 2012-04-05 09:49:34

對不起，這是一個錯誤的錯誤，現在它的工作 – skafandri 2012-04-05 10:47:35

爲了讓您的解決方案100％的jQuery（如建議斯特凡）

<head> 
<link href="colour/light.css" rel="stylesheet" type="text/css" id="stylelink"> 

<script type="text/javascript"> 
$('#colourselector').change(function(){ 
    $('#stylelink').attr('href',$(this).val()); 
}); 
</script> 

</head> 
<body> 
    <form action="#" name="colour" id="colour" onsubmit="return false;"> 
      <select id="colourselector" name="colour"> 
      <option value="colour/light.css">Light scheme</option> 
      <option value="colour/dark.css">Dark scheme</option> 
      </select> 
    </form> 
</body>

來源

2012-04-05 11:43:01 skafandri

使用jQuery和下拉菜單的簡單樣式表切換器

回答

相關問題