recherche

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 implémente le code de commutation TAB pour ouvrir une page Web avec des effets animés pour la première fois

高洛峰
高洛峰original
2017-02-08 16:51:401107parcourir

Cet article présente principalement le code de commutation de tabulation de jquery lors de la première ouverture d'une page Web avec des effets animés. Il implique les techniques de mise en œuvre de transformation dynamique de jquery contrôlant les attributs des éléments de page via des événements de clic de souris. qui en a besoin peut s'y référer.

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

Il s'agit d'un code TAB qui a un effet d'animation lors de la première ouverture d'une page Web. L'animation ne sera affichée que lorsque le menu TAB est cliqué pour la première fois, et disparaîtra lorsque vous cliquerez à nouveau. C'est un effet d'onglet pratique, veuillez le télécharger si vous en avez besoin.

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

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

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

http://www .php.cn/

Le code spécifique est le suivant : 


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网页TAB代码</title>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<style type="text/css">
body,h1,p,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;}
</style>
<script type="text/javascript">
 $(document).ready(function(){
  $(".demo li p").hide();
  $(".demo li").click(function(){
   $(this).addClass("cur").siblings().removeClass("cur");
   $("p.d-bk").slideDown()
   },function(){
   $("p.d-bk").slideUp() 
  })
 })
</script>
</head>
<body>
<ul class="demo">
 <li>
  导航1
 <p class="d-bk">111</p>
 </li>
 <li>
  导航2
 <p class="d-bk">222</p>
 </li>
 <li>
  导航3
 <p class="d-bk">333</p>
 </li>
</ul>
</body>
</html>

Pour plus d'implémentation jquery du code de commutation TAB pour ouvrir une page Web avec effets animés pour la première fois, veuillez faire attention au site Web PHP chinois !


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：Quatre façons d'implémenter le changement d'onglet en javascriptArticle suivant：Quatre façons d'implémenter le changement d'onglet en javascript

Articles Liés

Voir plus