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


how to change the style sheet of a page based on the option from the drop-down menu

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

<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> 

我有上面的下拉菜单。

    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> 

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

提交表单并使用会话/cookie来记住选择

例如

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

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

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

我认为这会起作用