suchen

Heim >Web-Frontend >js-Tutorial >jquery implementiert automatisch verkleinerbare TAB-Webseiten-Tabs code_jquery

jquery implementiert automatisch verkleinerbare TAB-Webseiten-Tabs code_jquery

WBOY
WBOYOriginal
2016-05-16 15:40:331462Durchsuche

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>

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

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：JQuery Dynamic Navigation Plug-In DynamicNav Verwendungsbeispiel Analysis_JQueryNächster Artikel：JQuery Dynamic Navigation Plug-In DynamicNav Verwendungsbeispiel Analysis_JQuery

In Verbindung stehende Artikel

Mehr sehen