jQuery example of simple web skin effect

This example describes how to implement a simple webpage skin switching effect using jQuery. Shared for everyone's reference, as follows:

Here is4files: skin.html, blue.css, green.html, red.html, all placed in the same directory.

1and 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> Skin Switch Demonstration</title>
  <!--Reference to Baidu CDN's 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(){
      //Switch Skin
      $('#skin_list').change(function(){
        skin_name = $(this).val()
        skin_ skin_name + ".css"
        $("#skincss").attr("href", skin_href)
      });
    });
  </script>
</head>
</head>
<body>
  <!--Skin List-->
  <div>
    Skin List:
    <select id="skin_list">
      <option value ="blue">Blue</option>
      <option value ="green">Green</option>
      <option value ="red">Red</option>
    </select>
  </div>
  <div>
    <ul>
      <li>Today</li>
      <li>Mood</li>
      <li>Not bad</li>
    </ul>
  </div>
</body>
</html>

The key point is only one, that is, those lines of JavaScript code. In order to let everyone see the full picture, the entire html code is posted.

2blue.css

li {color:blue;}

3green.css

li {color:green;}

4red.css

li {color:red;}

Some netizens may think it's a hassle to modify the css file with a single line, but this is a case of seeing the big picture from the small one. ^_^

5Screenshot as follows:

Readers who are interested in more about jQuery-related content can check out the special topics on this site: 'Summary of jQuery Extension Techniques', 'Summary of Common jQuery Plugins and Usage', 'Summary of jQuery Drag and Drop Effects and Techniques', 'Summary of jQuery Table (table) Operation Techniques', 'Summary of Ajax Usage in jQuery', 'Summary of Common jQuery Classic Effects', 'Summary of jQuery Animation and Effect Usage', and 'Summary of jQuery Selector Usage'.

I hope the content described in this article will be helpful to everyone in designing jQuery programs.

Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to notice#w3Please send an email to codebox.com (replace # with @ when sending an email) to report any violations, and provide relevant evidence. Once verified, this site will immediately delete the content suspected of infringement.

Basic Tutorial

guess you like