Membuat Simple Tab JQuery

Membuat Simple Tab JQuery ini dengan menggunakan JQuery, untuk cara peletakan kodenya kawan Panduan Cara Meletakan Kode pada template kawan tinggal memasukan kode dibawah ini sesuai panduan tersebut.

.simpleTab {
  margin:10px auto;
  color:white;
  text-align:left;
}

.simpleTab ul.tab-wrapper {
  margin:0px 0px;
  padding:0px 0px;
  height:30px;
}

.simpleTab ul.tab-wrapper li {
  margin:0px 0px;
  padding:0px 0px;
  float:left;
  list-style:none;
  display:inline;
}

.simpleTab ul.tab-wrapper li a {
  margin:0px 2px 0px 0px;
  display:block;
  font:bold 14px/30px threbuchet,Sans-Serif;
  padding:0px 15px;
  background-color:black;
  color:white;
  text-decoration:none;
  border:1px solid black;
  border-bottom:none;
  position:relative;
  z-index:1;
  outline:none;
  border-radius:10px 10px 0 0;
}

.simpleTab .tab-content {
  clear:both;
  padding:10px;
  background-color:#216F04;
  border:15px solid #956703;
  position:relative;
  z-index:2;
  top:-1px;
  height:200px;
  overflow:auto;
}

.simpleTab ul.tab-wrapper li a.activeTab {
  background-color:#956703;
  color:white;
  z-index:3;
}

<script type='text/javascript'>
//<![CDATA[
(function(d){d.fn.simpleTab=function(a){a=jQuery.extend({active:1,fx:"fade",showSpeed:1000,hideSpeed:1000,showEasing:null,hideEasing:null,show:function(){},hide:function(){},change:function(){}},a);return this.each(function(){var e=d(this),b=e.children("[data-tab]"),f=a.active-1;e.addClass("simpleTab").prepend('<ul class="tab-wrapper"></ul>');b.addClass("tab-content").each(function(){d(this).hide();e.find(".tab-wrapper").append('<li><a href="#">'+d(this).data("tab")+"</a></li>")}).eq(f).show();e.find(".tab-wrapper a").on("click", function(){var c=d(this).parent().index();d(this).closest(".tab-wrapper").find(".activeTab").removeClass("activeTab");d(this).addClass("activeTab");"slide"==a.fx?b.eq(c).is(":hidden")&&b.slideUp(a.hideSpeed,a.hideEasing,function(){a.hide.call(this)}).eq(c).slideDown(a.showSpeed,a.showEasing,function(){a.show.call(this)}):"fade"==a.fx?b.eq(c).is(":hidden")&&b.hide().eq(c).fadeIn(a.showSpeed,a.showEasing,function(){a.show.call(this)}):"fancyslide"==a.fx?b.eq(c).is(":hidden")&&b.slideUp(a.hideSpeed, a.hideEasing,function(){a.hide.call(this)}).eq(c).delay(a.hideSpeed).slideDown(a.showSpeed,a.showEasing,function(){a.show.call(this)}):b.eq(c).is(":hidden")&&b.hide().eq(c).show();a.change.call(this);return!1}).eq(f).addClass("activeTab")})}})(jQuery);
//]]>
</script>
<script type='text/javascript'>
$(function() {
    $(&#39;#tab&#39;).simpleTab();
});
</script>

<div id="tab">
    <div data-tab="Tab-1">Content 1</div>
    <div data-tab="Tab-2">Content 2</div>
    <div data-tab="Tab-3">Content 3</div>
    <div data-tab="Tab-4">Content 4</div>
</div>

Semoga cara Membuat Simple Tab JQuery ini berhasil dan bermanfaat.

Rating: 5 Reviewer: Unknown