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ドラッグ効果とスキルのまとめ》、《jQueryテーブル（table）操作スキルのまとめ》、《jQuery中のAjaxの使い方のまとめ》、《jQueryよくあるエフェクトのまとめ》、《jQueryアニメーションとエフェクトの使い方のまとめ》および《jQueryセレクタの使い方のまとめ》

この記事に記載されている内容が皆様のjQueryプログラミングに役立つことを願っています。

声明：この記事の内容はインターネットから取得され、著作権者に帰属します。コンテンツはインターネットユーザーによって自発的に貢献し、アップロードされました。このサイトは所有権を持ちません。また、人工編集は行われていません。著作権に関する問題がある場合は、メールで：notice#wまでお知らせください。3codebox.com（メールを送信する際、#を@に置き換えてください。報告を行い、関連する証拠を提供してください。一旦確認が取れたら、このサイトは即座に侵害を疑われるコンテンツを削除します。）

基本チュートリアル

お気に入り