Пример реализации эффекта изменения внешнего вида веб-страницы с помощью jQuery

Этот пример рассказывает, как с помощью jQuery реализовать простую функцию изменения темы веб-страницы. Поделюсь с вами, как это сделать, вот так:

Здесь есть 4 файла: skin.html, blue.css, green.html, red.html, все они находятся в одной папке.

1、skin.html

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<head>
  <title>皮肤切换演示</title>
  <!--引用百度CDN的jquery-->
  <script language="javascript" type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
  <link href="blue.css" id="skincss" rel="stylesheet" type="text/css"/>
  <script type="text/javascript">
    $("document").ready(function(){
      //切换皮肤
      $('#skin_list').change(function(){
        skin_name = $(this).val()
        skin_ skin_name + ".css"
        $("#skincss").attr("href", skin_href)
      });
    });
  </script>
</head>
</head>
<body>
  <!--皮肤列表-->
  <div>
    Список тем:
    <select id="skin_list">
      <option value ="blue">Синий</option>
      <option value ="green">Зеленый</option>
      <option value ="red">Красный</option>
    </select>
  </div>
  <div>
    <ul>
      <li>Сегодня</li>
      <li>Настроение</li>
      <li>Неплохо</li>
    </ul>
  </div>
</body>
</html>

Важно только одно: эти строки JavaScript кода. Чтобы вы могли увидеть полный вид, я выложил весь html код.

2. blue.css

li {color:blue;}

3. green.css

li {color:green;}

4. red.css

li {color:red;}

Возможно, некоторые пользователи считают, что的一句话还不够修改css файл, но это только малая часть, пожалуйста, извините за это. ^_^

5. Скриншот см. ниже:

Для тех, кто интересуется дополнительной информацией о jQuery, мы рекомендуем看一下 темы на нашем сайте: «Сводка技巧 по расширению jQuery», «Сводка по常用jQuery плагинам и их использованию», «Сводка по эффектам и技巧ам для jQuery drag and drop», «Сводка по技巧ам для работы с таблицами (table) в jQuery», «Сводка по использованию Ajax в jQuery», «Сводка по популярным классическим эффектам jQuery», «Сводка по использованию анимации и эффектов в jQuery» и «Сводка по использованию селекторов в jQuery»

Надеюсь, что описание в этой статье поможет вам в разработке jQuery.

Заявление: содержание этой статьи взято из Интернета, авторские права принадлежат соответствующему автору. Контент предоставлен пользователями Интернета, загружен самостоятельно, сайт не имеет права собственности, не прошел редактирование и не несет ответственности за связанные с этим юридические вопросы. Если вы обнаружите спорное содержимое о нарушении авторских прав, пожалуйста, отправьте письмо по адресу: notice#oldtoolbag.com (во время отправки письма замените # на @) для сообщения и предоставления соответствующих доказательств. Если после проверки подтвердится, что содержимое является спорным, сайт немедленно удалит спорное содержимое.

Основной учебник

Рекомендуем к просмотру