jquery hanya melaksanakan kod menu tab dengan fade effect

jquery hanya melaksanakan kod menu tab dengan fade effect_jquery

WBOY

Lepaskan： 2016-05-16 15:41:22

asal

1097 orang telah melayarinya

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>

Salin selepas log masuk

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