Tất cả bài viết | Bootstrap

Hướng dẫn tạo Tab menu đổi màu bằng Bootstrap

Trong bài học lập trình Bootstrap này các Bạn sẽ được Hướng dẫn tạo Tab menu đổi màu bằng Bootstrap cho website

Bước 1: Tạo cấu trúc HTML

 
 Hướng dẫn tạo Tab menu đổi màu bằng Bootstrap
 	
  		 
    
     
      
       
       Chi tiết sản phẩm
        
       Bài viết
        
       Bình luận
        
       
      
      
       
        
        Nội dung chi tiết của sản phẩm 
        
        
        Nội dung về bài viết 
        
        
        Nội dung bình luận

Bước 2: Tạo cấu trúc CSS

.panelbox.nav-tabs  {       
border-color:transparent;   
}   

.panelbox.nav-tabs>.active>a,
.panelbox.nav-tabs>.active:hover>a,
.panelbox.nav-tabs a,
.panelbox.nav-tabs a:hover{       
background-color:transparent!important;       
border-color:transparent!important;       
border-radius:0px!important;       
color:white!important;       
font-size:18px;   
}             

.panelFilter {        
border-color: #3D9970;        
-webkit-transition: border-color 4s ease-out;        
-moz-transition: border-color 4s ease-out;        
-o-transition: border-color 4s ease-out;        
transition: border-color 4s ease-out;    
}
    

.panelFilter > .panel-heading {        
color: #ffffff;        
background-color: #3D9970;        
border-color: #3D9970;        
-webkit-transition: background-color 4s ease-out;        
-moz-transition: background-color 4s ease-out;        
-o-transition: background-color 4s ease-out;        
transition: background-color 4s ease-out;    
}        

.panelResults {        
border-color: #FF4136;        
-webkit-transition: border-color 4s ease-out;        
-moz-transition: border-color 4s ease-out;        
-o-transition: border-color 4s ease-out;        
transition: border-color 4s ease-out;    
}
    

.panelResults > .panel-heading {        
color: #ffffff;        
background-color: #FF4136;        
border-color: #FF4136;        
-webkit-transition: background-color 4s ease-out;        
-moz-transition: background-color 4s ease-out;        
-o-transition: background-color 4s ease-out;        
transition: background-color 4s ease-out;    
}    

.panelMetrics {        
border-color: #0074D9;        
-webkit-transition: border-color 4s ease-out;        
-moz-transition: border-color 4s ease-out;        
-o-transition: border-color 4s ease-out;        
transition: border-color 4s ease-out;    
}    

.panelMetrics > .panel-heading {        
color: #ffffff;        
background-color: #0074D9;        
border-color: #0074D9;        
-webkit-transition: background-color 4s ease-out;        
-moz-transition: background-color 4s ease-out;        
-o-transition: background-color 4s ease-out;        
transition: background-color 4s ease-out;    
}

Bước 3: Gọi thư viện Bootstrap

Bước 5: Gọi thư viện JQUERY

Bước 5: Tạo hiệu ứng đổi màu bằng JQUERY

$(function() {      
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {            
var target = $(e.target).attr("href")            
if (target == "#tabFilters")            {                
$('#panelBox').removeClass();                
$('#panelBox').addClass('panel panelBox panelFilter');            
}            
if (target == "#tabResults") {                
$('#panelBox').removeClass();                
$('#panelBox').addClass('panel panelBox panelResults');            
}            
if (target == "#tabMetrics") {                
$('#panelBox').removeClass();                
$('#panelBox').addClass('panel panelBox panelMetrics');            
}        
})
;});

Xem demo Tải Code Đăng ký tham gia làm hội viên của kênh để được xem các bài học mới nhất