Scroll To Top

Cách tạo và sử dụng CSS TAB

Đăng lúc: Thứ năm - 28/07/2016 09:34 |  NukeViet | : Người đưa tin | Đã xem: 1769 |   0

Cách tạo và sử dụng CSS TAB

Như các bạn đã biết. Nukeviet tích hợp css bootstrap vào hệ thống theme mặc định của mình. Điều này giúp cho việc thiết kế giao diện tương thích trên các thiết bị trở nên đơn giản và nhanh chóng hơn. CSS TAB cũng đã được tích hợp sẵn trong Bootstrap CSS

Tuy nhiên, đôi lúc mình muốn làm một hiểu hiệu ứng mượt mà, đẹp hơn. Bạn có thể tự tạo cho mình một kiểu tab đơn giản như sau:

TÀI NGUYÊN

Bạn cần tạo 1 file css lưu vào thư mục themes-của-bạn/css  trên mã nguồn web của bạn với nội dung như sau

.tabviewsection {
    border: 1px solid #33363B;
	border-radius: 5px;
    overflow: hidden;
}
.tabs_widget_left {
    list-style: none;
    list-style-type: none;
    margin: 0px;
    padding-left: 0px;
    height: 35px;
    background: #33363B;
    margin-left: -1px;
    margin-right: -1px;
	text-align:center
}

.tabs_widget_left li {
    list-style: none;
    list-style-type: none;
    padding: 0;
	display:inline-block;
	width:50%;
	margin-left:-1px;
	margin-right:-1px;
}

.tabs_widget_left li a.tabs_left_current {
    color: #fff;
    text-decoration: none;
    background: #79ACCD;
}
.tabs_widget_left li a {
    color: #fff;
    padding: 9px 13px;
    display: block;
    text-decoration: none;
    font-size: 17px;
    line-height: 17px;
	position:relative
}

.tabs_widget_left li a.tabs_left_current:after {
    color: #eb1c24;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #79ACCD;
    content: "";
    position: absolute;
    z-index: 33333;
    left: 48%;
    top: 100%;
}

.tabs_left_conten{
	padding-top:15px
}

 

Nếu bạn biết một chút về CSS, bạn có thể dễ dàng tùy chỉnh các thông số màu sắc, font chữ, màu nền theo style của web mình cho ưng ý.

Tại nơi bạn muốn thể hiện CSS TAB trong html. Có thể là như khu vực bình luận mình đã làm trong trang chi tiết bài viết ( Xem demo tạihttp://hocmot.net trong chi tiết bài viết)

Với demo trên thì mình đặt trong file detail.tpl của module news nukeviet. Còn bạn, có thể đặt mã này nơi nào muốn hiểu thị trên web bạn

 

<link type="text/css" rel="stylesheet" href="duong-dan-den-file-css" />
<ul class="tabs_widget_left tabs_left">
	<li class="tabs">
		<a href="#tabs-1">Tieu de 1</a>
	</li>
	<li class="tabs">
		<a href="#tabs-2">Tieu de 2</a>
	</li>
</ul>
<div id="tabs-1" class="tabs_left_conten">
	NOI DUNG 1
</div>

<div id="tabs-2" class="tabs_left_conten">
	NOI DUNG 2
</div>

 

Nếu bạn muốn thể hiện thêm nhiều tab: 

_ trong thẻ ul bạn tạo thêm thẻ li có thuộc tính href="#tendat"  tabs-3 chẳng hạn

_ tạo thêm 1 thẻ div nội dung bên dưới có id="tendat"  tabs-3 chẳng hạn

 

Đến này, CSS Tab vẫn chưa hoạt động. Vi nó chưa xác định được sự kiện khi bạn click chuột vào tiêu đề tab thì sẽ hiển thị nội dung nào?

Vậy, bạn cần thêm vào đoạn script sau ( có thể thêm ngay bên dưới mã html nơi thể hiện)

 

<script type="text/javascript">
        jQuery(document).ready(function($){
            $(".tabs_left_conten").hide();
            $("ul.tabs_left li:first a").addClass("tabs_left_current").show();
            $(".tabs_left_conten:first").show();
            $("ul.tabs_left a").click(function() {
            	$("ul.tabs_left a").removeClass("tabs_left_current a"); 
            	$(this).addClass("tabs_left_current"); 
            	$(".tabs_left_conten").hide(); 
            	    var activeTab = $(this).attr("href"); 
            	$(activeTab).fadeIn();
            		return false;
            	});
        });
	</script>

 

Ngoài dạng CSS Tab này, còn rất nhiều kiểu css khác. Cách thức hoạt động củng tương tự như vậy. Hy vọng bạn có thể xử lý được vấn đề này, và áp dụng được vào những kiểu CSS TAB khác.

Nguồn tin: nuke.vn

 Bài viết thuộc chuyên mục: NukeViet

+ Thủ thuật soạn bài giảng E-learning: https://igiaoduc.blogspot.com
+ Diễn đàn hỗ trợ soạn bài giảng E-Learning: https://www.facebook.com/groups/baigiangelearning

 

Tip:Bài viết, video, hình ảnh, vui lòng gửi về địa chỉ email: Phavaphugmail.com


Tổng số điểm của bài viết là: 0 trong 0 đánh giá

Click để đánh giá bài viết

  Ý kiến bạn đọc

Khi một người đàn ông điên dại vì một người đàn bà thì chỉ một mình nàng có thể chữa khỏi cái điên dại ấy của chàng ta mà thôi.

kenhbgyoutube

 

 

 

 

 

 

BÌNH LUẬN MỚI NHẤT - TIN TỨC
BÌNH LUẬN MỚI NHẤT - WINDOWS
MỖI LÚC MỘT NỤ CƯỜI
Thống kê truy cập
  • Đang truy cập87
  • Hôm nay14,130
  • Tháng hiện tại1,048,151
  • Tổng lượt truy cập51,678,945
Thống kê truy cập
Flag Counter
Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây