Переключить файл CSS по нажатию кнопки - PullRequest
Новая
       4

Переключить файл CSS по нажатию кнопки

4 голосов
/ 16 февраля 2012

Я хочу переключить CSS страницы, нажимая кнопку в asp.net, но как-то не могу этого сделать. Мой код выглядит следующим образом:

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

У меня есть 2 css файла в папке Styles как day.css и night.css. Страница использует day.css и должна переключиться на night.css при нажатии любой кнопки.

Если я помещаю файл .html и оба файла .css в папку, это на самом деле работает. Но в Visual Studio (то есть на странице aspx) этого не происходит. Я пробовал другой код jQuery, например alert, он отлично работает. после этого я могу улучшить свой код с помощью переключателя и т. д.

Ответы [ 3 ]

2 голосов
/ 20 февраля 2012

Получил ответ от Дейва Уорда. Все, что мне нужно было сделать, это включить метод protectDefault (). Ovveride поведение формы по умолчанию.

1 голос
/ 06 февраля 2017

Согласно вашему требованию этот фрагмент поможет вам.

Выполните следующие действия:

вам нужно создать два файла CSS в одном месте.1008 * 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 голосов
/ 16 февраля 2012

добавьте id attr к ссылке и попробуйте удалить ссылку, а затем добавьте новую ссылку к этому 

var newstyle = $("#style").clone().attr("link","newstyle.css");
$("#style").remove().after(newstyle);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...