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

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

WBOY

Libérer： 2016-05-16 15:40:33

original

1472 Les gens l'ont consulté

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>

Copier après la connexion

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