Javascript 我需要在单击页面中的链接时切换样式表，以便页面以不同的颜色主题显示

HTML

JS

---

我的问题是，当我点击链接时，网页的整个结构都丢失了，颜色也没有变化。我对这项技术非常陌生，需要专家的帮助。请向我推荐解决此问题的方法。

您的问题在于jQuery选择器。您正在将属性href应用于所有链接元素，包括您的主css链接。我建议您提供链接和id，然后更新选择器：

html

我可以提供另一个我实践的解决方案吗

我有我的样式表，但我更改了body类以反映我想要的特定元素的外观

$(document).ready(function() { 
    $("#theme-blue").click(function() { 
        $("#css_theme_blue").attr("href", "theme_blue.css");
        return false;
    });
});

然后，当我想要更改主题时，我会交换body类：

body.blue_theme #element_1 {
background:blue;
}

body.green_theme #element_2 {
background: green;
}

---

这种方法对我来说更可取，因为所有样式都是在开始时加载的，并且在加载新样式表时不会在较慢的机器上暂停。

假设您在/Content文件夹中有两个css文件

main-theme.css：

$('#blue-theme-button').on('click', function() {
$(body).removeClass('green_theme').addClass('blue_theme');
}

body {
   background-color:#fff;
}

blue-theme.css：

$('#blue-theme-button').on('click', function() {
$(body).removeClass('green_theme').addClass('blue_theme');
}

body {
   background-color:#fff;
}

你有一个默认使用main-theme.css的页面，link元素的id为#siteTheme，还有id为#blueTheme的clickable元素

body {
   background-color: blue;
}

您只需为#blueTheme click编写函数，该函数将更改id为#siteTheme的link元素的href属性值：

<link id="siteTheme" href="/Content/main-theme.css" rel="stylesheet" type="text/css" />
<a href="#" id="blueTheme">Activate Blue Theme</a>

$（文档）.ready（函数（）{
$（“#blueTheme”）。单击（函数（）{
$（“#siteTheme”）.attr（“href”，“Content/blue-theme.css”）；
});
})

我希望这会有所帮助；）在编写这些脚本之前，不要忘记加载jquery

<script>
            $(document).ready(function () {
                $("#blueTheme").click(function () {
                    $("#siteTheme").attr("href","/Content/blue-theme.css");
                });
            })
</script>

尽量不要使用

@import

。这会降低您的页面速度…谢谢。我尝试将id添加到链接标签，但这次我单击链接时什么也没发生。是否有其他方法可以实现这一点？我编辑了我的答案，为您提供了一个不同的解决方案，我认为这可能对您更有利。

<link id="siteTheme" href="/Content/main-theme.css" rel="stylesheet" type="text/css" />
<a href="#" id="blueTheme">Activate Blue Theme</a>

<script>
            $(document).ready(function () {
                $("#blueTheme").click(function () {
                    $("#siteTheme").attr("href","/Content/blue-theme.css");
                });
            })
</script>

<script src="/Scripts/jquery-1.10.2.min.js"></script>