cari

Rumah >hujung hadapan web >tutorial js >jquery hanya melaksanakan kod menu tab dengan fade effect_jquery

jquery hanya melaksanakan kod menu tab dengan fade effect_jquery

WBOY
WBOYasal
2016-05-16 15:41:221116semak imbas

Contoh dalam artikel ini menerangkan pelaksanaan ringkas kod menu tab dengan kesan pudar menggunakan jquery. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Menu tab dengan kesan pudar menggunakan kesan yang dilengkapkan bersama oleh jQuery Selepas tetikus mengklik pada tab, kecerunan (kesan pudar masuk dan pudar) muncul, menjadikan halaman web kelihatan lebih jelas.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

http://demo.jb51.net/js/2015/jquery-cha-style-tab-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>
<title>带渐显效果的选项卡菜单</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
body {
 background: #f0f0f0;
 margin: 0;
 padding: 0;
 font: 10px normal Verdana, Arial, Helvetica, sans-serif;
 color: #444;
}
h1 {
 font-size: 3em;
 margin: 20px 0;
}
.container {
 width: 500px;
 margin: 10px auto;
}
ul.tabs {
 margin: 0;
 padding: 0;
 float: left;
 list-style: none;
 height: 32px;
 border-bottom: 1px solid #999;
 border-left: 1px solid #999;
 width: 100%;
}
ul.tabs li {
 float: left;
 margin: 0;
 padding: 0;
 height: 31px;
 line-height: 31px;
 border: 1px solid #999;
 border-left: none;
 margin-bottom: -1px;
 background: #e0e0e0;
 overflow: hidden;
 position: relative;
}
ul.tabs li a {
 text-decoration: none;
 color: #000;
 display: block;
 font-size: 1.2em;
 padding: 0 20px;
 border: 1px solid #fff;
 outline: none;
}
ul.tabs li a:hover {
 background: #ccc;
} 
html ul.tabs li.active, html ul.tabs li.active a:hover {
 background: #fff;
 border-bottom: 1px solid #fff;
}
.tab_container {
 border: 1px solid #999;
 border-top: none;
 clear: both;
 float: left; 
 width: 100%;
 background: #fff;
 -moz-border-radius-bottomright: 5px;
 -khtml-border-radius-bottomright: 5px;
 -webkit-border-bottom-right-radius: 5px;
 -moz-border-radius-bottomleft: 5px;
 -khtml-border-radius-bottomleft: 5px;
 -webkit-border-bottom-left-radius: 5px;
}
.tab_content {
 padding: 20px;
 font-size: 1.2em;
}
.tab_content h2 {
 font-weight: normal;
 padding-bottom: 10px;
 border-bottom: 1px dashed #ddd;
 font-size: 1.8em;
}
.tab_content h3 a {
 color: #254588;
}
.tab_content img {
 float: left;
 margin: 0 20px 20px 0;
 border: 1px solid #ddd;
 padding: 5px;
}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 //Default Action
 $(".tab_content").hide(); //Hide all content
 $("ul.tabs li:first").addClass("active").show(); //Activate first tab
 $(".tab_content:first").show(); //Show first tab content
 //On Click Event
 $("ul.tabs li").click(function() {
  $("ul.tabs li").removeClass("active"); //Remove any "active" class
  $(this).addClass("active"); //Add "active" class to selected tab
  $(".tab_content").hide(); //Hide all tab content
  var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
  $(activeTab).fadeIn(); //Fade in the active content
  return false;
 });
});
</script>
</head>
<body>
<div class="container">
 <ul class="tabs">
  <li class="active"><a href="#tab1">tab1</a></li>
  <li><a href="#tab2" id="">tab2</a></li>
  <li><a href="#tab3">tab3</a></li>
  <li><a href="#tab4">tab4</a></li>
 </ul>
 <div class="tab_container">
  <div id="tab1" class="tab_content" style="display: block;">
   111111111111111
  </div>
  <div id="tab2" class="tab_content" style="display: none;">
   222222222222222
  </div>
  <div id="tab3" class="tab_content" style="display: none;">
   333333333333333
  </div>
  <div id="tab4" class="tab_content" style="display: none;">
   444444444444444
  </div>
 </div>
</div>
</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：js melaksanakan penukaran TAB sepadan dengan warna kemahiran code_javascript yang berbezaArtikel seterusnya：js melaksanakan penukaran TAB sepadan dengan warna kemahiran code_javascript yang berbeza

Artikel berkaitan

Lihat lagi