Javascript 在bootstrap.css主题和#x27；s

我正在尝试在我在MVC应用程序上创建的黑暗和光明主题之间切换

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

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

Light

黑暗的

我的另外两个引导主题位于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');
});

---

不确定我是否犯了一些明显的错误，但在此方面的任何帮助都是非常感谢的

您可能需要以下代码：

$('#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不以该字符串开头

---

在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')
});

---

您当前遇到的问题是什么？请注意，默认情况下，按钮会提交其所在的任何表单。当按下按钮时，当前页面没有任何更改。我想知道我查询的href或js本身是否存在问题。您对link元素的dom查询不可能不返回任何元素吗？看起来您要查找的是以

~/

开头的HREF。在你的razor页面中，它被转换为你的内容根目录的路径，但是当你查询它时，你不会尝试这个吗？嗨，谢谢你的回答。我试过你的代码片段，结果还是一样，当我按下按钮时，什么也没发生，我没有在我的MVC应用程序上使用razor页面。我正在使用cshtml页面。对于我的_布局页面，我没有使用任何服务器端代码，因此不需要razor。从我的代码中，您可以看到我放在bootstrap.js文件中的js有任何问题。或者你能看到可能导致这种情况的任何其他问题吗？我已经创建了一个基本示例。只需打开cmd->git clone并打开项目注意，我没有修改原始的bootstrap.css文件。我已经创建了一个新的css文件，在这里我重载了colorsHi，感谢您的响应。您是否运行了您创建的mvc应用程序？应用程序似乎不会改变其中的主题。同样的问题，我一直在我的电脑，它的工作良好。如果打开开发人员工具（F12），控制台中是否会出现异常（粉红色）？您好，谢谢您的回答。不幸的是，这对我不起作用。在我的_布局页面中，我有和我放在bootstrap.js文件中的js。不清楚它为什么不起作用。如果您能看到任何其他问题，将不胜感激。请尝试在脚本标记的页脚中添加此代码。当您在检查脚本时单击，有什么变化吗？Hi Lucjan，当使用您在页脚部分提供的代码段运行此脚本时。这似乎删除了与应用程序相关的任何类型的引导，但至少在现在单击按钮时发生了更改。您必须始终附加引导CSS文件，如果您想要主题，只需使用选择器编写CSS文件以覆盖原始CSS值。您还可以始终附加带有暗主题和亮主题的文件，只需根据选择器向正文中添加一个类即可。