cari

Rumah  >  Artikel  >  hujung hadapan web  >  jquery melaksanakan secara automatik tab halaman web TAB code_jquery

jquery melaksanakan secara automatik tab halaman web TAB code_jquery

WBOY
WBOYasal
2016-05-16 15:40:331411semak imbas

Contoh dalam artikel ini menerangkan pelaksanaan jquery bagi kod tab halaman web TAB yang boleh menyusut secara automatik. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Ini ialah kod halaman web tab TAB yang boleh mengecut secara automatik Apabila tetikus diletakkan pada label, kandungan label secara automatik mengembang Apabila tetikus dialih keluar atau dialihkan ke label lain, tab secara automatik mengecut dan bersembunyi . Bangun, tab kedua terbentang, kesan animasi agak lancar, dan ia adalah kesan khas halaman web yang baik.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

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

Kod khusus adalah seperti berikut: 

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

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan jquery semua orang.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：jquery pemalam navigasi dinamik contoh penggunaan dynamicNav analysis_jqueryArtikel seterusnya：jquery pemalam navigasi dinamik contoh penggunaan dynamicNav analysis_jquery

Artikel berkaitan

Lihat lagi