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

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

高洛峰

Libérer： 2017-02-08 16:51:40

original

1106 Les gens l'ont consulté

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>

Copier après la connexion

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 !