recherche

Maison >interface Web >js tutoriel >Comment changer l'apparence d'une page Web avec JQuery_jquery

Comment changer l'apparence d'une page Web avec JQuery_jquery

WBOY
WBOYoriginal
2016-05-16 15:57:141354parcourir

L'exemple de cet article décrit comment JQuery peut modifier l'apparence d'une page Web. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Afin de mieux améliorer l'expérience utilisateur, de nombreuses pages Web ont pour fonction de changer de skin, alors comment cela est-il implémenté ? En fait, le changement de skin consiste simplement à changer le style CSS dans la position correspondante ! !

Voici une démonstration de comment changer simplement de peau

Lors de la conception du code HTML, faites attention à quelques conseils. Vous pouvez définir l'identifiant du bouton d'option d'habillage pour qu'il soit identique au nom du fichier de style d'habillage, de sorte que l'opération de changement d'habillage soit beaucoup plus simple. doit avoir une table de connexion avec un style Id , en manipulant la valeur de l'attribut href du lien, réalisant ainsi un changement de skin. Autrement dit : l'utilisateur peut changer le skin après avoir cliqué. Cependant, lorsque l'utilisateur actualise ou ferme le navigateur, le skin sera à nouveau initialisé, pensez donc à utiliser CooKie pour enregistrer la sélection actuelle : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<link href="css/default.css" rel="stylesheet" type="text/css" />
<link href="css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile" />
<!-- 引入jQuery -->
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<!--  引入jQuery的cookie插件 -->
 <script src="js/jquery.cookie.js" type="text/javascript"></script>
 <script type="text/javascript">
 //<![CDATA[
 $(function(){
  var $li =$("#skin li");
  $li.click(function(){
  switchSkin( this.id );
  });
  var cookie_skin = $.cookie( "MyCssSkin");
  if (cookie_skin) {
  switchSkin( cookie_skin );
  }
 });
 function switchSkin(skinName){
   $("#"+skinName).addClass("selected").siblings().removeClass("selected");
  //当前<li>元素选中
  //去掉其它同辈<li>元素的选中
  $("#cssfile").attr("href","css/"+ skinName +".css");
  //设置不同皮肤
  $.cookie( "MyCssSkin" , skinName , { path: '/', expires: 10 });
 }
 //]]>
 </script>
</head>
<body>
<ul id="skin">
 <li id="skin_0" title="灰色" class="selected">灰色</li>
 <li id="skin_1" title="紫色">紫色</li>
 <li id="skin_2" title="红色">红色</li>
 <li id="skin_3" title="天蓝色">天蓝色</li>
 <li id="skin_4" title="橙色">橙色</li>
 <li id="skin_5" title="淡绿色">淡绿色</li>
</ul>
<div id="div_side_0">
<div id="news">
   <h1 class="title">时事新闻</h1>
 </div>
  </div>
  <div id="div_side_1">
 <div id="game">
  <h1 class="title">娱乐新闻</h1>
 </div>
</div>
</body>
</html>

J'espère que cet article sera utile à la programmation jQuery de chacun.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Méthode Jquery pour ajouter dynamiquement une entrée box_jqueryArticle suivant：Méthode Jquery pour ajouter dynamiquement une entrée box_jquery

Articles Liés

Voir plus