Question

所以，我在我的网站上添加了一个按钮，将样式表更改为另一个样式表。我是这样做的：

JQuery的

$(document).ready(function(){

        $("button.city").click(function() { 

           $("link[rel=stylesheet]").attr({href : "stylesheets/city.css"}); })


          });

HTML

<link rel="alternate stylesheet" type="text/css" href="stylesheets/city.css" title="city">

<button type="button" class="theme city btn btn-default btn-sm">
        <span class="glyphicon glyphicon-tree-conifer" aria-hidden="true"></span> 
    </button>

现在出现的问题是，当你点击按钮时，引导程序文件似乎要卸载。我如何保留它以便引导程序不会卸载或者它做了什么而不影响我的HTML？

（点击索引页底部的小树图标）

WEBSITE

编辑：看起来更好的联系表单样式也正在受到影响。

Answer 1

更新2

首先发布的代码工作正常。以下是根据标准假设的方式。

你应该有两个css链接标签（样式表和替代样式表），其标题反映了你的主题名称

<link rel="stylesheet" type="text/css" href="stylesheets/main.css" title="main">
<link rel="alternate stylesheet" type="text/css" href="stylesheets/city.css" title="city">

要切换主题，您应该使用disabled = true | false

我写了一个小jQuery代码来改变主题

function changeTheme (name){ 
  $('link[rel*=style][title]').each(function(i, sheet){ 
    sheet.disabled = true; 
    if($(sheet).attr('title') == name) sheet.disabled = false;
  }); 
}

$("button.city").click(function() { 
   changeTheme('city');
});

第一个答案

您正在使用的选择器正在用city.css替换所有样式表。

您只需将main.css更改为city.css

您可以为<link href="stylesheets/main.css" rel="stylesheet" name="mainCSS">

指定名称属性

然后使用下面的脚本替换特定的css文件

$("button.city").click(function() { 
   $("link[rel=stylesheet][name='mainCSS']").attr({href : "stylesheets/city.css"});
});

希望这有帮助。

切换样式表引导程序的问题

1 个答案:

更新2

第一个答案