logo标签列表

点击按钮切换CSS文件

jqueryasp.netcsswebforms
4
我想在asp.net中通过单击按钮切换页面的CSS，但不知何故无法实现。我的代码如下：
HTML:
<div>
    <h1>My Website</h1>
    <br/>
    <button>Night Mode</button>
    <button>Day Mode</button>
    </div>

脚本：

<script>
        $(function () {
            $('button').click(function () {

               $('link').attr('href', 'Styles/night.css');
            });

        });
    </script>

标题：

 <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" />

我有两个CSS文件在Styles文件夹中，分别为day.css和night.css。页面正在使用day.css，并应在单击任何按钮时切换到night.css。
如果我将.html文件和两个.css文件放在一个文件夹中，它实际上可以正常工作。但在Visual Studio（即aspx页面）中却不行。我尝试了其他jQuery代码，如alert，它可以正常工作。之后我可以通过使用toggle等来改进我的代码。
3个回答
2

我从Dave Ward那里得到了答案。 我所需要做的就是包含preventDefault()方法，以覆盖表单的默认行为。

1
根据您的要求，这个片段将会帮助您。
请按照以下步骤进行操作：
您需要在同一位置创建两个CSS文件。
1：Day.css
2：Night.css
之后，使用以下代码来切换CSS文件。
<html>
<head>
<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   <link href="Day.css" id="styles" rel="stylesheet" type="text/css" />

</head>
<script>
$(document).ready(function(){
$('#mode').click(function(){
if($('link#styles').attr('href')=="Day.css"){
$('#mode').attr('value','Switch To Day Mode')
$('link#styles').attr('href','Night.css')
}
else
{
$('#mode').attr('value','Switch To Night Mode')
$('link#styles').attr('href','Day.css')
}
})

});
</script>
<div class="table-responsive container">
<input type=button id="mode" text="Switch Mode" class="btn btn-primary" value="Switch To Night Mode" >  </div>
  </html>
0

为链接添加一个id属性，尝试删除链接，然后将新链接附加到该位置

var newstyle = $("#style").clone().attr("link","newstyle.css");
$("#style").remove().after(newstyle);
我在链接中添加了一个ID为“style”，并修改了代码如下： var newstyle = $（“#style”）.clone()。attr（“link”，“Styles / night.css”）; $（“#style”）.remove（）。after（newstyle）; 先生，仍然不起作用。 - Muhammad Ramzan
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接