我正在尝试在我的 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');
});
不确定我是否犯了一些明显的错误,但如果有任何帮助,我们将不胜感激。
最佳答案
这是在 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')
});
关于javascript - 在 bootstrap.css 主题之间动态切换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61065437/