Esempio di implementazione di un effetto di cambio di skin semplice con jQuery

Questa guida spiega come implementare un effetto di cambio di skin con jQuery. Condivido questo con tutti voi per riferimento, come segue:

C'è qui 4 file: skin.html, blue.css, green.html, red.html, tutti nella stessa directory.

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>
    Elenco delle skin:
    <select id="skin_list">
      <option value ="blue">Blu</option>
      <option value ="green">Verde</option>
      <option value ="red">Rosso</option>
    </select>
  </div>
  <div>
    <ul>
      <li>Oggi</li>
      <li>Stato d'animo</li>
      <li>Bel</li>
    </ul>
  </div>
</body>
</html>

L'unico punto importante è quei pochi righe di codice JavaScript. Per mostrare l'intero quadro, ho inserito l'intero codice html.

2, blue.css

li {color:blue;}

3, green.css

li {color:green;}

4, red.css

li {color:red;}

Alcuni utenti potrebbero pensare che una frase sia sufficiente per modificare il file css, ma qui si tratta di un esempio per illustrare un concetto più ampio, perdonatemi. ^_^

5, ecco lo screenshot:

Per chi è interessato a ulteriori contenuti jQuery, è possibile consultare le sezioni speciali di questo sito: 'Concetti di estensione jQuery', 'Concetti di plugin jQuery e loro utilizzo', 'Concetti di effetti di trascinamento e tecniche jQuery', 'Concetti di tecniche di gestione delle tabelle jQuery', 'Concetti di utilizzo di Ajax in jQuery', 'Concetti di effetti classici jQuery', 'Concetti di utilizzo di animazioni e effetti jQuery' e 'Concetti di tecniche di selezione jQuery'.

Spero che l'articolo descritto sia utile per la progettazione di programmi jQuery.

Dichiarazione: il contenuto di questo articolo è stato tratto da Internet, è di proprietà del rispettivo autore, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, questo sito non detiene i diritti di proprietà, non è stato editato manualmente e non assume alcuna responsabilità legale. Se trovi contenuti sospetti di violazione del copyright, invia un'e-mail a: notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare, fornendo prove pertinenti. Una volta verificata, questo sito rimuoverà immediatamente il contenuto sospetto di violazione del copyright.

Guida di base