使用 jQuery 实现样式表切换器。
针对“入门者后续”的评论，我将尽力让它更具指导性。
我在编写时用来测试的页面可以在这里找到。
页面显示
您需要在每个页面的 <head> 中以 <link> 标签的形式显示当前样式表。该 <link> 标签将需要一个 id 以供稍后在 JavaScript 中引用。例如：
<?php
$current_stylesheet = $user->stylesheet;
?>
<link href='<?php echo $current_stylesheet ?>' rel='stylesheet' type='text/css' id='stylelink' />
更改偏好设置
一旦您显示了用户的样式表，您需要一种方法来更改它。创建一个<form>，当用户更改其样式表时，将向服务器发送请求：
<form method="GET" id="style_form" >
<select name="stylesheet" id="styleswitch">
<option value="css1.css">Black & White</option>
<option value="css2.css" selected="selected">Shades of Grey</option>
</select>
<input value='save' type='submit' />
</form>
服务器端
现在，如果没有使用jQuery，提交这个表格应该是GET方式（如果你喜欢也可以改为POST方式）stylesheet={new stylesheet} 在当前页面上。因此，在您的引导/站点包含文件中的某个位置，您需要检查它，以下是一个PHP示例：
$styles = array(
'css1.css' => 'Black & White',
'css2.css' => 'Shades of Grey',
);
if (!empty($_GET["sytlesheet"]) {
if (array_key_exists($_GET["stylesheet"], $styles)) {
$user->stylesheet = $_GET["stylesheet"];
$user->save();
}
}
实时预览
现在，您已经为没有JavaScript的用户创建了一个功能齐全的样式切换器。现在，您可以添加一些jQuery代码，使这一切变得更加优美。您需要使用jQuery表单插件来创建一个漂亮的ajaxForm()函数，用于处理表单提交。请将jQuery和jQuery表单库添加到页面中：
<script type='text/javascript' src='/js/jquery.js'></script>
<script type='text/javascript' src='/js/jquery.form.js'></script>
现在我们已经包含了所需的库 -
$(function() {
$("#style_form").ajaxForm(function() {
$("#thediv").text('Now Using: '+$('#styleswitch').val());
});
$("#styleswitch").change(function() {
$("#stylelink").attr('href', $(this).val());
$(this).closest('form').submit();
});
$("#style_form input[type=submit]").remove();
});
