jquery implémente le code de commutation TAB pour ouvrir une page Web avec des effets animés pour la première fois

Maison

interface Web

js tutoriel

jquery implémente le code de commutation TAB pour ouvrir une page Web avec des effets animés pour la première fois_jquery

May 16, 2016 pm 03:40 PM

jquery 动画效果

L'exemple de cet article décrit comment jquery implémente pour la première fois le code de commutation TAB pour ouvrir une page Web avec des effets animés. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Il s'agit d'un code TAB de page Web avec des effets animés lors de sa première ouverture. L'animation ne s'affichera que lorsque vous cliquerez pour la première fois sur le menu TAB. Elle disparaîtra lorsque vous cliquerez à nouveau dessus. effet d'onglet de page, si nécessaire, veuillez le télécharger.

La capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démo en ligne est la suivante :

http://demo.jb51.net/js/2015/jquery-first-open-flash-style-tab-cha-codes/

Le code spécifique est le suivant :

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;网页TAB代码&lt;/title&gt;
&lt;script type="text/javascript" src="jquery1.3.2.js"&gt;&lt;/script&gt;
&lt;style type="text/css"&gt;
body,h1,div,ul,li{ margin:0; padding:0;}
li{ list-style:none;}
.demo{ width:300px; margin:30px auto; position:relative;}
.demo li{ float:left; padding:0 15px; cursor:pointer; height:30px; line-height:30px;}
.d-bk{}
.demo li.cur{ background-color:#F00; color:#FFF;}
.demo li.cur .d-bk{ border:1px solid #F00; width:300px; height:150px; background-color:#f1f1f1; position:absolute; left:0; top:30px; color:#333;}
&lt;/style&gt;
&lt;script type="text/javascript"&gt;
 $(document).ready(function(){
  $(".demo li div").hide();
  $(".demo li").click(function(){
   $(this).addClass("cur").siblings().removeClass("cur");
   $("div.d-bk").slideDown()
   },function(){
   $("div.d-bk").slideUp() 
  })
 })
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;ul class="demo"&gt;
 &lt;li&gt;
  导航1
 &lt;div class="d-bk"&gt;111&lt;/div&gt;
 &lt;/li&gt;
 &lt;li&gt;
  导航2
 &lt;div class="d-bk"&gt;222&lt;/div&gt;
 &lt;/li&gt;
 &lt;li&gt;
  导航3
 &lt;div class="d-bk"&gt;333&lt;/div&gt;
 &lt;/li&gt;
&lt;/ul&gt;
&lt;/body&gt;
&lt;/html&gt;

Copier après la connexion

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

Déclaration de ce site Web

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