Question

如何在此页面中创建实时样式和脚本切换器？ http://www.momizat.com/theme/goodnews/？

它们提供了一个面板，以便访问者可以轻松地更改页面的外观（css）以及菜单栏上的效果（jquery）。还有一个cookie，以便当访问者移动到另一个页面时，自定义将保持加载到目标页面上。

我想将这些功能应用到我的网站上，所以我的访客不会厌倦一种风格，但可以根据他们的口味而变化。

每个答案都将非常感激。感谢...

Answer 1

我还没有看过您的示例页面的实现，但大多数网站都会使用这种方法：

当用户点击主题切换器按钮时，
- 在Cookie中设置新值
- 在body标记上添加特定的类名称（即class =＆＃34; theme1＆＃34;）
对于每个主题，让您的CSS以该类名开头（即body.theme1 p { color: red; }）
当用户加载页面时，请阅读cookie并相应地设置类名。

Answer 2

好的，如果你想用PHP做到这一点：

0）首先，必须在每个页面上启动会话，否则这将无效，因为必须启动会话才能启动cookie或在下一页访问它。

<?php session_start(); ?>

1）您必须编写一个以HEAD标记开头的PHP脚本：

 <?php
 if (isset($_REQUEST['theme']) ) { $_REQUEST['theme'] = $css1; echo "<link rel='text/stylesheet' href='path/to/{$css1}.css'>"; 
    else echo "<link rel='text/stylesheet' href='path/to/default.css'>"; 
 ?>

好的，现在如果有一个名为'theme'的参数设置了cookie，那么该参数的值将作为css文件而不是default.css。

2）现在，您需要为用户提供切换主题的选项，可能通过下拉表单。

<?php 
echo "<form name='myForm'><select onchange='this.form.submit()' name='theme'>";
echo "<option value='theme1'>Theme 1</option>";
echo "<option value='theme2'>Theme 2</option>";
echo "</select></form>";
?>

注意：我实际上没有运行此代码，我确信存在错误，但这只是我将如何做的一般概述。

进行问题排查：确保正在提交表单。您可以使用print_r($_REQUEST);转储cookie的内容以进行故障排除。然后确保CSS文件的路径是正确的。最后，一旦你完成所有工作，确保你没有从缓存的CSS文件中得到错误的结果。例如，在Chrome中，您可以打开“Inspect Element”开发人员工具，该工具每次都会完全刷新页面。

使用PHP和Cookie的CSS切换器？

2 个答案: