recherche

Maison >interface Web >js tutoriel >jquery implémente l'onglet de page Web TAB automatiquement rétractable code_jquery

jquery implémente l'onglet de page Web TAB automatiquement rétractable code_jquery

WBOY
WBOYoriginal
2016-05-16 15:40:331456parcourir

L'exemple de cet article décrit l'implémentation par jquery du code d'onglet de page Web TAB automatiquement rétractable. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Il s'agit d'un code de page Web à onglet TAB qui peut automatiquement rétrécir lorsque la souris est placée sur l'étiquette, le contenu de l'étiquette s'agrandit automatiquement. Lorsque la souris est supprimée ou déplacée vers d'autres étiquettes, l'onglet se rétrécit et se cache automatiquement. . Levez-vous, le deuxième onglet s'étire, l'effet d'animation est assez fluide et c'est un bon effet spécial de page Web.

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-hidden-show-tab-cha-nav-menu-codes/

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,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 .d-bk{ border:1px solid #F00; width:300px; height:150px; background-color:#f1f1f1; position:absolute; left:0; top:30px; color:#333;display:none;}
</style>
<script type="text/javascript">
 $(document).ready(function(){
  $(".demo li").hover(function(){
   $(this).addClass("cur");
   $(this).children(".d-bk").slideDown();
  }).mouseout(function(){
   $(".demo li").removeClass("cur");
   $(this).children(".d-bk").slideUp();
  })
 })
</script>
</head>
<body>
<ul class="demo">
 <li>
  aaaa
 <div class="d-bk">111</div>
 </li>
 <li>
  bbbb
 <div class="d-bk">222</div>
 </li>
 <li>
  cccc
 <div class="d-bk">333</div>
 </li>
</ul>
</body>
</html>

J'espère que cet article sera utile à la conception de 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：Exemple d'utilisation du plug-in de navigation dynamique jquery DynamicNav Analysis_jqueryArticle suivant：Exemple d'utilisation du plug-in de navigation dynamique jquery DynamicNav Analysis_jquery

Articles Liés

Voir plus