我正在嘗試在我的 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');});不確定我是否犯了一些明顯的錯誤，但對此的任何幫助表示贊賞。
3 回答
炎炎設計
TA貢獻1808條經驗 獲得超4個贊
這是 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')
});
楊魅力
TA貢獻1811條經驗 獲得超6個贊
您可能需要以下代碼：
$('#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 不以此字符串開頭。
斯蒂芬大帝
TA貢獻1827條經驗 獲得超8個贊
我下載了 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');
});
});
但刷新頁面后網站又顯示淺色主題。
- 3 回答
- 0 關注
- 299 瀏覽
添加回答
舉報
0/150
提交
取消