Toggle Tabs với CSS3 và jQuery

Tabs được sử dụng rộng rãi trong các mẫu thiết kế web bởi tính tiện dụng trong việc sắp xếp nội dung mà nó mang lại. Hòng mang đến cho các bạn có thêm sự lựa chọn, mình xin chia sẻ một mẫu tab rất đơn giản và hoàn toàn có thể sử dụng ở bất kì trang blog/web nào mà các bạn đang sở hữu.

Xem Demo | Download

HTML

Để xây dựng tabs cho nội dung, chúng ta sẽ chia theo đoạn html bên dưới.

<div class="container">
	<div class="tab-slider--nav">
		<ul class="tab-slider--tabs">
			<li class="tab-slider--trigger active" rel="tab1">Tab 1</li>
			<li class="tab-slider--trigger" rel="tab2">Tab 2</li>
		</ul>
	</div>
	<div class="tab-slider--container">
		<div id="tab1" class="tab-slider--body">
			<h2>First Tab</h2>
			<p>Toggle switch style tab navigation. Currently only works with two tabs.</p>
			<p>Donec ullamcorper nulla non metus auctor fringilla. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Nulla vitae elit libero, a pharetra augue.</p>
		</div>
		<div id="tab2" class="tab-slider--body">
			<h2>Second Tab</h2>
			<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
		</div>
	</div>
</div>

CSS

Việc định dạng cho tabs rất đơn giản, các bạn chỉ việc copy đoạn css bên dưới.

body {
  background: rgba(52, 95, 144, 0.07);
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.66667;
}

.container {
  awidth: 75%;
  margin: 3rem auto;
}

h2 {
  color: #345F90;
  font-size: 24px;
  line-height: 1.25;
  font-family: "Roboto Slab", serif;
  margin-top: 20px;
  margin-bottom: 20px;
}

.tab-slider--nav {
  awidth: 100%;
  float: left;
  margin-bottom: 20px;
}

.tab-slider--tabs {
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  border-radius: 35px;
  overflow: hidden;
  background: #fff;
  height: 35px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.tab-slider--tabs:after {
  content: "";
  awidth: 50%;
  background: #345F90;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out;
  border-radius: 35px;
}
.tab-slider--tabs.slide:after {
  left: 50%;
}

.tab-slider--trigger {
  font-size: 12px;
  line-height: 1;
  font-weight: bold;
  color: #345F90;
  text-transform: uppercase;
  text-align: center;
  padding: 11px 20px;
  position: relative;
  z-index: 2;
  cursor: pointer;
  display: inline-block;
  -webkit-transition: color 250ms ease-in-out;
  transition: color 250ms ease-in-out;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.tab-slider--trigger.active {
  color: #fff;
}

.tab-slider--body {
  margin-bottom: 20px;
}

jQuery

Và cũng chỉ thêm vài đoạn script bên dưới, là các bạn có ngay một ứng dụng cho web của mình.

<script src="jquery.min.js"></script>
<script>
$("document").ready(function(){
  $(".tab-slider--body").hide();
  $(".tab-slider--body:first").show();
});

$(".tab-slider--nav li").click(function() {
  $(".tab-slider--body").hide();
  var activeTab = $(this).attr("rel");
  $("#"+activeTab).fadeIn();
	if($(this).attr("rel") == "tab2"){
		$('.tab-slider--tabs').addClass('slide');
	}else{
		$('.tab-slider--tabs').removeClass('slide');
	}
  $(".tab-slider--nav li").removeClass("active");
  $(this).addClass("active");
});

</script>   

Chúc các bạn thành công !

Chuyên Mục: Css, Javascript

Bài viết được đăng bởi webmaster