在 bootstrap.css 主题之间动态切换

Question

我正在尝试在我的 MVC 应用程序上创建的深色和浅色主题之间切换。

我的 _Layout.cshtml 页面加载我在下面创建的默认主题

<link id="theme" rel="stylesheet" href="~/lib/bootstrap/dist/css/Original.css">

我创建了以下按钮来在下面的主题之间切换

<button id="light">Light</button><br />

<button id="dark">Dark</button>

我的另外两个引导主题位于 lib > bootstrap> dist > css >

我的 botstrap.js 文件中有以下 js

$('#dark').click(function () {

    $('link[href="~/lib/bootstrap/dist/css/Dark.css"]').attr('href', '~/lib/bootstrap/dist/css/Dark.css');

});

$('#light').click(function () {

    $('link[href="~/lib/bootstrap/dist/css/Dark.css"]').attr('href', '~/lib/bootstrap/dist/css/Light.css');

});

不确定我是否犯了一些明显的错误，但对此的任何帮助表示赞赏。

Answer 1

这是 VanillaJS 中的，还要检查链接标签上的 href 是否正确解析为 CSS 文件。const darkBtn = document.querySelector('#dark');const lightBtn = document.querySelector('#light');const linkTag = document.querySelector('#theme');darkBtn.addEventListener('click', () => {&nbsp; linkTag.setAttribute('href', '~/lib/bootstrap/dist/css/Dark.css')});lightBtn.addEventListener('click', () => {&nbsp; linkTag.setAttribute('href', '~/lib/bootstrap/dist/css/Light.css')});

Answer 2

您可能需要以下代码：$('#dark').click(function () {&nbsp; &nbsp; $('#theme').attr('href', '~/lib/bootstrap/dist/css/Dark.css');});$('#light').click(function () {&nbsp; &nbsp; $('#theme').attr('href', '~/lib/bootstrap/dist/css/Light.css');});您的代码正在寻找 href 字面以 开头的链接元素~/。在您的 razor 页面中，href 以此字符串开头。但 ASP.NET 将其替换为内容根的路径，因此对于浏览器来说，href 不以此字符串开头。

Answer 3

我下载了 Pieterjan 解决方案，在我添加后它开始工作event.preventDefault()：$(document).ready(function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#dark').click(function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; event.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#dynamicCss').attr('href', '/css/site-dark.css');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#light').click(function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; event.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#dynamicCss').attr('href', '/css/site-light.css');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; });但刷新页面后网站又显示浅色主题。