với class="tabcontent" đều bị ẩn theo mặc định (với CSS & JS). Khi người dùng nhấp vào một nút, nó sẽ mở ra nội dung tab "khớp" với nút này.

Tabs Slider là những thuật ngữ quen thuộc trong Jquery. Hiển thị nội dung theo các tabs là một trong những kỹ thuật rất hiệu quả khi trang web của bạn có chứa nhiều nội dung ở các thể loại khác nhau, nó cũng rất hữu dụng ngay cả trang của bạn là một trang bán hàng. Việc sử dụng các tabs nội dung sẽ khiến trang web của bạn chuyên nghiệp và thân thiện hơn với người dùng, ta sẽ chỉ hiển thị nội dung mà người dùng quan tâm đến.

Trong bài viết này, mình sẽ hướng dẫn cách xây dựng chức năng hiện thị nội dung theo tabs và chạy slider với HTML, CSS và Jquery.

HTML :

  
  


  
Tabs Slider Demo
  

    

      Item 1
      Item 2
      Item 3
      Item 4
      Item 5
      Item 6
    
    

      

        

          

            

              Content 1
            
            

              Content 2
            
            

              Content 3
            
            

              Content 4
            
            

              Content 5
            
            

              Content 6
            
          
        
      
      

        

          

            

              Content 1
            
            

              Content 2
            
            

              Content 3
            
            

              Content 4
            
            

              Content 5
            
            

              Content 6
            
          
        
      
      

        

          

            

              Content 1
            
            

              Content 2
            
            

              Content 3
            
            

              Content 4
            
            

              Content 5
            
            

              Content 6
            
          
        
      
      

        

          

            

              Content 1
            
            

              Content 2
            
            

              Content 3
            
            

              Content 4
            
            

              Content 5
            
            

              Content 6
            
          
        
      
      

        

          

            

              Content 1
            
            

              Content 2
            
            

              Content 3
            
            

              Content 4
            
            

              Content 5
            
            

              Content 6
            
          
        
      
      

        

          

            

              Content 1
            
            

              Content 2
            
            

              Content 3
            
            

              Content 4
            
            

              Content 5
            
            

              Content 6
            
          
        
      
    
  
  
  

CSS :

body {
  font-family: Arial, Helvetica, sans-serif;
}
.unstyled {
  list-style: none;
  margin: 0;
  padding: 0;
}
.section__list {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -8px;
}
.section__item {
  box-sizing: border-box;
  padding: 0 8px 10px;
  flex-basis: 50%;
  max-width: 50%;
}
.nav-links {
  background-color: 
# fff;
  border-top: 1px solid 
# d9e4e6;
  padding-top: 16px;
}
.nav-links__list {
  align-items: center;
  border-bottom: 3px solid 
# 0e357f;
  display: flex;
  justify-content: space-between;
}
.nav-links__item {
  align-items: center;
  color: 
# 133881;
  font-size: 12px;
  font-weight: 600;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  line-height: 1.5;
  height: 40px !important;;
  text-align: center;
  box-sizing: border-box;
  text-decoration: none;
}
.nav-links__item:hover,
.nav-links__item:focus {
  outline: none;
  outline-offset: 0;
}
.slick-current.nav-links__item {
  background-color: 
# 133881;
  color: 
# fff;
  border-radius: 6px 6px 0 0;
}
.tab-content--slider {
  padding-bottom: 45px;
}
.tab-content--slider .slick-arrow {
  background-color: transparent;
  border: 0;
  border-radius: 50%;
  color: 
# 707070;
  cursor: pointer;
  font-size: 0;
  height: 24px;
  padding: 0;
  position: absolute;
  text-align: center;
  bottom: 15px;
  width: 24px;
  line-height: 24px;
  z-index: 99;
}
.tab-content--slider .slick-prev {
  left: 15px;
}
.tab-content--slider .slick-next {
  right: 15px;
}
.tab-content--slider .slick-dots li {
  margin: 0 5px;
}
.tab-content--slider .slick-dots button {
  display: block;
  width: 6px;
  height: 6px;
  padding: 0;
  border: none;
  border-radius: 100%;
  background-color: 
# 707070;
  text-indent: -9999px;
}
.tab-content--slider .slick-dots .slick-active button {
  background-color: 
# 0e357f;
}
.tab-content--slider .slick-dots {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 23px;
  padding: 0;
  display: flex;
  justify-content: center;
  margin: 0;
  list-style-type: none;
}
.tab-info__item {
  border-bottom: 1px solid 
# d9e4e6;
  display: block;
  overflow: hidden;
  padding: 14px 16px;
}
.tab-info__link {
  color: 
# 000;
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
  width: 100%;
  text-decoration: none;
}
.tab-info__link:hover {
  color: 
# 133881;
}

JS :

$(document).ready(function () {
  $('.nav-links').each(function () {
    const navSlides = $(this).find('.nav-tabs--slider')
    const contentSlides = $(this).find('.tab-content--slider')
    contentSlides.slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: true,
      dots: true,
      infinite: false,
      asNavFor: navSlides
    });
    navSlides.slick({
      slidesToShow: 6,
      slidesToScroll: 1,
      asNavFor: contentSlides,
      dots: false,
      arrows: false,
      infinite: false,
      focusOnSelect: true
    });
  });
});

Demo :

Kết luận :

Hy vọng bài viết này sẽ giúp mọi người tạo ra được 1 Tabs Slider đơn giản gọn nhẹ bằng Jquery. Cảm ơn mọi người đã theo dõi.