RSSCSS

Hướng dẫn tạo Tab bằng HTML5 và CSS3

Ngày xửa ngày xưa, khi chúng ta tạo Tab thường bắt buộc dùng đến jQuery. Hôm nay, Tab được tạo dễ dàng bằng HTML5 và CSS3. Và mình sẽ hướng dẫn mọi người cách để tạo ra Tab như thế.

HTML5

 <article class="tabDetails"> 
  	<span id="tab1" class="anchor"></span>
    <div class="tabContents"> 
    	<a class="link" href="#tab1">Xã hội</a>
          <div class="detail">
            <p>Nội dung Tab1</p>
          </div>
    </div>
    <span id="tab2" class="anchor"></span>
    <div class="tabContents"> 
    	<a class="link" href="#tab2">Chính trị</a>
          <div class="detail">
            <p>Nội dung Tab2</p>
          </div>
    </div>
    .....
 </article>

CSS3

Đầu tiên chúng ta sẽ CSS3 cho thẻ tabDetails

.tabDetails {
	width: 100%;
	max-width: 600px;
	background: #ccc;
	margin: 50px auto 0;
	position: relative;}

Tiếp theo là định dạng từng Tab.

.tabContents div {
	opacity:0;
	background: #fbfbfb;
	float: left;
	width: 100%;
	position: absolute;
	top: 15px;
	left: 0;
	padding: 10px;
	box-sizing: border-box;
	line-height: 1.5em;}

.detail{
	margin-top:20px;}

.detail p{
	line-height:130%;
	font-size:13px;
	padding:10px;}

Cuối cùng là hiệu ứng từng Tab.

.anchor {
	position: fixed;
	display: none;}
    
.link{
	float: left;
	width: 20%;
	padding: 10px;
	background: #fbfbfb;
	margin-right: 5px;
	text-decoration: none;
	font-weight: bold;
	color: #333;
	text-align: center;}

.link:hover {
	color: #ff6600;}

.anchor:target + .tabContents div {
	opacity: 1;}

.anchor:target + .link {
	background: #ccc;}

Theo mặc định, nội dung của từng Tab sẽ không xuất hiện, nên chúng ta phải thêm #tab1 vào cuối liên kết để hiển thị.

Nguồn: Y2Graphic

Tags:

Nếu bạn thấy bài viết hữu ích, hãy nhấn +1 và các liên kết chia sẻ để website ngày càng phát triển hơn. Xin cám ơn bạn!

Nếu là khách, bạn phải đăng ký tài khoản và kích hoạt tài khoản để bình luận được hiển thị ở đây.
Thông tin kích hoạt gửi đến mail của bạn.

Tin mới hơn

Tin cũ hơn

Lên trên đầu