Beispiel für einfache Webseite mit jQuery Skin-Wechsel-Effekt

Dieser Artikel beschreibt, wie man mit jQuery einfache Wechsel der Webseitenfarbe implementiert. Hier ist eine Beispiel für Ihre Referenz:

Hier gibt es4Dateien: skin.html、blue.css、green.html、red.html, alle im selben Verzeichnis abgelegt.

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>Skin Wechsel Demo</title>
  <!--Baidus CDN jQuery zitieren-->
  <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 wechseln
      $('#skin_list').change(function(){
        skin_name = $(this).val()
        skin_ skin_name + ".css"
        $("#skincss").attr("href", skin_href)
      });
    });
  </script>
</head>
</head>
<body>
  <!--Skin-Liste-->
  <div>
    Skin-Liste:
    <select id="skin_list">
      <option value ="blue">Blau</option>
      <option value ="green">Grün</option>
      <option value ="red">Rot</option>
    </select>
  </div>
  <div>
    <ul>
      <li>今天</li>
      <li>心情</li>
      <li>不错</li>
    </ul>
  </div>
</body>
</html>

Der Hauptpunkt ist nur, dass es sich um einige Zeilen JavaScript-Code handelt. Um das Ganze zu zeigen, habe ich den gesamten html-Code hinzugefügt.

2、blue.css

li {color:blue;}

3、green.css

li {color:green;}

4、red.css

li {color:red;}

Vielleicht denken einige Leser, dass ein einziger Satz den css-Datei stören könnte, aber das ist ein Beispiel, um von der kleinen zum Großen zu gelangen, und ich hoffe, das ist mir verziehen. ^_^

5、Screenshot wie folgt:

Interessierte Leser können mehr über jQuery in den Themenbereichen dieser Website nachlesen: 'Zusammenfassung der jQuery-Erweiterungstechniken', 'Zusammenfassung der häufig verwendeten jQuery-Plugins und deren Verwendung', 'Zusammenfassung der jQuery-Zieheffekte und -Techniken', 'Zusammenfassung der jQuery-Table-Operationstechniken', 'Zusammenfassung der Verwendung von Ajax in jQuery', 'Zusammenfassung der häufigen jQuery-Effekte', 'Zusammenfassung der Verwendung von Animationen und Effekten in jQuery' und 'Zusammenfassung der jQuery-Selektorfunktionen'.

Ich hoffe, dass die in diesem Artikel beschriebenen Informationen Ihnen bei der jQuery-Programmierung helfen.

Erklärung: Der Inhalt dieses Artikels wurde aus dem Internet übernommen und gehört dem Urheberrecht des jeweiligen Autors. Der Inhalt wurde von Internetnutzern freiwillig beigesteuert und hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht von Hand bearbeitet. Falls Sie Inhalte finden, die möglicherweise Urheberrechtsverletzungen darstellen, sind Sie herzlich eingeladen, eine E-Mail an notice#w zu senden.3codebox.com (Bitte ersetzen Sie # durch @, wenn Sie eine Beschwerde einreichen, und fügen Sie relevante Beweise bei. Sobald überprüft, wird diese Website den涉嫌侵权的内容立即删除。)

Grund教程

Vermutlich gefällt Ihnen