单击按钮切换 CSS 文件
我想通过单击asp.net中的按钮来切换页面的CSS,但不知何故无法做到这一点。我的代码如下:
HTML:
<div>
<h1>My Website</h1>
<br/>
<button>Night Mode</button>
<button>Day Mode</button>
</div>
Script:
<script>
$(function () {
$('button').click(function () {
$('link').attr('href', 'Styles/night.css');
});
});
</script>
Header:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link href="Styles/day.css" rel="stylesheet" type="text/css" />
我在 Styles 文件夹中有 2 个 css 文件,分别是 day.css 和 night.css。该页面正在使用 day.css,单击任何按钮后应切换到 night.css。
如果我将 .html 文件和两个 .css 文件放在一个文件夹中,它实际上可以工作。但在 Visual Studio(即 aspx 页面)中,它没有发生。我尝试了其他 jQuery 代码,例如 alert
,它工作得很好。 之后我可以通过使用切换等来改进我的代码。
I want to switch CSS of the page by clicking a button in asp.net, but somehow can't do that. My code as follows:
HTML:
<div>
<h1>My Website</h1>
<br/>
<button>Night Mode</button>
<button>Day Mode</button>
</div>
Script:
<script>
$(function () {
$('button').click(function () {
$('link').attr('href', 'Styles/night.css');
});
});
</script>
Header:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link href="Styles/day.css" rel="stylesheet" type="text/css" />
I have 2 css files in Styles folder as day.css and night.css. The page is using day.css and should switch to night.css on clicking of any button.
If I put the .html file and both .css files in a folder, it actually works. But in Visual Studio (i.e aspx page), it's not happening. I tried other jQuery code like alert
, it works fine.
i can improve my code after that by using toggle etc.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
从戴夫·沃德那里得到了答案。
我所要做的就是包含 PreventDefault() 方法。覆盖表单的默认行为。
Got the answer from Dave Ward.
All i had to do is include preventDefault() method. To ovveride the default behavior of form.
根据您的要求,此片段将为您提供帮助。
按照以下步骤操作:
您必须在同一位置创建两个 css 文件。
1: Day.css
2: Night.css
之后使用此代码切换 css 文件。
As per your requirement this snippet will helps you.
Follow these steps:
you have to create two css files in same location.
1: Day.css
2: Night.css
After that use this code for switch css files.
添加一个 id attr 到链接并尝试删除链接,然后向该链接添加新链接
add an id attr to link and try to remove link then append new link to that