jquery implementiert automatisch verkleinerbare TAB-Webseiten-Tabs code

jquery implementiert automatisch verkleinerbare TAB-Webseiten-Tabs code_jquery

WBOY

Freigeben： 2016-05-16 15:40:33

Original

1454 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt die Implementierung des automatisch verkleinerbaren TAB-Webseiten-Tabcodes durch jquery. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Dies ist ein TAB-Tab-Webseitencode, der automatisch verkleinert werden kann, wenn die Maus auf dem Etikett platziert wird. Wenn die Maus entfernt oder zu anderen Etiketten bewegt wird, wird die Registerkarte automatisch verkleinert und ausgeblendet . Steh auf, die zweite Registerkarte dehnt sich aus, der Animationseffekt ist recht flüssig und es handelt sich um einen guten Spezialeffekt für Webseiten.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/jquery-hidden-show-tab-cha-nav-menu-codes/

Der spezifische Code lautet wie folgt:

<!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>

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für das JQuery-Programmierungsdesign aller hilfreich sein wird.