Question

我正在创建一个包含外部样式表链接的页面，现在我创建了更多样式表并在页面中添加了一个下拉菜单，现在如何将这些选项与外部样式表链接，以便一旦用户从下拉菜单中选择一个选项，该页面的样式表应该完全变为新的样式表...我该怎么做？

<div style="float:right;padding:26px 0 0 0;color:#fff;"><select>
      <option>please select your choice</option>
<option value="one">green</option>
<option value="two">red</option>
</select>

</div>

我有上面的下拉菜单。

Answer 1

    try this :)

1. give a id to your select box say(giveAId)
2. then in jquery function pass this id and apply a change function('this will notice the   the change made in your select box').
3. get it's value from option box 
4. then pass it to the link href like in this example


 <script type="text/javascript">
    $(function() {
        $("#giveAId").change(function(){ //2 step
           var stylesheet = $(this).val(); // 3 step
           $('link').attr('href',stylesheet+ '.css'); //4 step done here
          });
    });

 </script>


    <div  style="float:right;padding:26px 0 0 0;color:#fff;">
       <select id="giveAId"> // 1 step
          <option>please select your choice</option>
          <option value="one">green</option>
          <option value="two">red</option>
        </select>
    </div>

Answer 2

您可以为用户提供一个cookie，用于记住他们从菜单中选择的样式表，并根据该cookie加载页面的CSS。然后只需点击一下即可刷新页面，如果需要，可以使用AJAX。

Answer 3

提交表单并使用session / cookies记住选择

例如

$_SESSION['selected_stylesheet'] = $_POST['stylesheet'];

然后当你调用外部css文件时你应该使用$ _SESSION ['selected_stylesheet']

<link type="text/css" href="<? echo $_SESSION['selected_stylesheet'] ?>.css" rel="stylesheet" />

我认为这样可行

如何根据下拉菜单中的选项更改页面的样式表

3 个答案: