Exemplo de efeito de troca de skin simples em página web com jQuery

Este exemplo mostra como usar jQuery para criar um efeito de troca de skin simples. Partilho com vocês para referência, conforme a seguir:

aqui há4os seguintes arquivos: skin.html、blue.css、green.html、red.html，devem estar na mesma pasta.

1、skin.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//PT"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<head>
  <title>demo de troca de skin</title>
  <!--usar o CDN do Baidu para o 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(){
      //mudar de skin
      $('#skin_list').change(function(){
        skin_name = $(this).val()
        skin_ skin_name + ".css"
        $("#skincss").attr("href", skin_href)
      });
    });
  </script>
</head>
</head>
<body>
  <!--lista de skins-->
  <div>
    lista de skins:
    <select id="skin_list">
      <option value ="blue">azul</option>
      <option value ="green">verde</option>
      <option value ="red">vermelho</option>
    </select>
  </div>
  <div>
    <ul>
      <li>hoje</li>
      <li>emoção</li>
      <li>ótimo</li>
    </ul>
  </div>
</body>
</html>

O ponto principal é apenas esses poucos linhas de código JavaScript. Para que vocês possam ver a visão geral, eu coloquei todo o código html.

2blue.css

li {cor:blue;}

3green.css

li {cor:green;}

4red.css

li {cor:red;}

Alguns usuários podem achar que uma frase ainda é suficiente para modificar o arquivo css, aqui é um exemplo de grande para pequeno, desculpe o erro. ^_^

5Capturas a seguir:

Leitores interessados em mais conteúdo sobre jQuery podem consultar a seção especial deste site: 'Resumo de Técnica de Extensão jQuery', 'Resumo de Plugin e Uso jQuery', 'Resumo de Efeito de Arrastar e Soltar jQuery', 'Resumo de Técnicas de Operação de Tabela jQuery', 'Resumo de Uso de Ajax no jQuery', 'Resumo de Efeito Clássico jQuery', 'Resumo de Uso de Animação e Efeito jQuery' e 'Resumo de Uso do Seletor jQuery'

Espero que o que é descrito neste artigo ajude os amigos a projetar programas jQuery.

Declaração: o conteúdo deste artigo é da internet, pertencente ao respectivo detentor dos direitos autorais, o conteúdo é contribuído e carregado voluntariamente pelos usuários da internet, o site não possui direitos de propriedade, não foi editado artificialmente e não assume responsabilidades legais relacionadas. Se você encontrar conteúdo suspeito de violação de direitos autorais, por favor, envie e-mail para: notice#oldtoolbag.com (ao enviar e-mail, substitua # por @ para denunciar, forneça provas relacionadas e, se confirmado, o site deletará imediatamente o conteúdo suspeito de infringência de direitos autorais.)

Manual básico