在 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', () => {

  linkTag.setAttribute('href', '~/lib/bootstrap/dist/css/Dark.css')

});

lightBtn.addEventListener('click', () => {

  linkTag.setAttribute('href', '~/lib/bootstrap/dist/css/Light.css')

});

Answer 2

您可能需要以下代码：

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

    $('#theme').attr('href', '~/lib/bootstrap/dist/css/Dark.css');

});

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

    $('#theme').attr('href', '~/lib/bootstrap/dist/css/Light.css');

});

您的代码正在寻找 href 字面以 开头的链接元素~/。在您的 razor 页面中，href 以此字符串开头。但 ASP.NET 将其替换为内容根的路径，因此对于浏览器来说，href 不以此字符串开头。

Answer 3

我下载了 Pieterjan 解决方案，在我添加后它开始工作event.preventDefault()：

$(document).ready(function () {

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

                event.preventDefault();

                $('#dynamicCss').attr('href', '/css/site-dark.css');

            });

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

                event.preventDefault();

                $('#dynamicCss').attr('href', '/css/site-light.css');

            });

        });

但刷新页面后网站又显示浅色主题。