Heim > Artikel > Web-Frontend > jquery implementiert einfach den Tab-Menücode mit fade effect_jquery

jquery implementiert einfach den Tab-Menücode mit fade effect_jquery

WBOYOriginal: 2016-05-16 15:41:221049Durchsuche

Das Beispiel in diesem Artikel beschreibt die einfache Implementierung von Tab-Menücode mit Fade-Effekt mithilfe von JQuery. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Das Tab-Menü mit Fade-Effekt nutzt den von jQuery gemeinsam vervollständigten Effekt. Nach einem Mausklick auf den Tab erscheint ein Farbverlauf (Ein- und Ausblendeffekt), der die Webseite lebendiger erscheinen lässt.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/jquery-cha-style-tab-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>
<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>

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：js implementiert die TAB-Umschaltung entsprechend den verschiedenen Farben der Code_Javascript-FähigkeitenNächster Artikel：js implementiert die TAB-Umschaltung entsprechend den verschiedenen Farben der Code_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen