Trong các bài viết trước đây mình đã chia sẻ một số javascript
Hôm nay mình hướng dẫn một Javascript mới là click thể thêm class/id và cách mình ứng dụng nó vào lập trình web.Cách ứng dụng Click to add class
- DEMO trên trang web: https://www.tinhdauonline.com.vn
 |
| Click to add class áp dụng cho trang web tinhdauonline.com.vn |
Đoạn Javascript Click to add class như sau:
<script>
$(document).ready(function(){
$(".addcart2,.view_lft").click(function(){
$(".dachon,#s0").addClass("showtext");
});
});
</script>
$(document).ready(function(){
$(".addcart2,.view_lft").click(function(){
$(".dachon,#s0").addClass("showtext");
});
});
</script>
Cách hoạt động của Javascript Click to add class
Khi Click chuột vào Class .addcart2 hoặc.view_lft thì Javascript sẽ tìm Class .dachon và #s0 và thêm cho nó class showtext. Nếu có nhiều class bạn ngăn cách nó bằng dấu phẩy (,)
Bước 1: Đầu tiên mình sẽ viết CSS cho class showtext vừa thêm
.showtext{box-shadow: 0 0 0 0 #dee0de;animation: pulse2 1.5s infinite;display: flow-root}
@-webkit-keyframes pulse2{0%{-moz-transform:scale(1);-ms-transform:scale(1);-webkit-transform:scale(1);transform:scale(1)}70%{-moz-transform:scale(1);-ms-transform:scale(1);-webkit-transform:scale(1);transform:scale(1);box-shadow:0 0 0 50px rgba(90,153,212,0)}100%{-moz-transform:scale(1);-ms-transform:scale(1);-webkit-transform:scale(1);transform:scale(1);box-shadow:0 0 0 0 rgba(90,153,212,0)}}
Mình viết cho nó 1 animation (hiệu ứng) và đặt tên là pulse2. Hiệu ứng này nôm na na như "tỏ ánh hào quang" để gây sự chú ý vậy ^^. Mình dùng màu xám có mã màu #dee0de
Bước 2: Xác định Class hoặc Id click vào
Mình muốn khi KH click vào nút "Cho Vào Giỏ Hàng" ô sản phẩm và "Thêm Vào Giỏ Hàng" ở phần bài viết và xác định được 2 Class là .addcart2 hoặc.view_lft
Bước 3: Xác định Class/id thêm Class
Ở đây mình xác định được 2 Class là .dachon,#s0
.dachon(display:none) : Ẩn, Không hiệu ứng
#s0: Không có hiệu ứng
Khi click vào "Cho Vào Giỏ Hàng" ô sản phẩm và "Thêm Vào Giỏ Hàng" nó sẽ thêm class .showtext mà mình đã viết CSS trước đó là dùng display: flow-root để hiện ẩn class .dachon và đồng thời tạo cho .dachon,#s0 hiệu ứng "Hào Quang".
Cuối cùng ta thu được đoạn Code (Javascript + CSS)
<script>Thêm đoạn code trên vào trước thẻ đóng /body
$(document).ready(function(){
$(".addcart2,.view_lft").click(function(){
$(".dachon,#s0").addClass("showtext");
});
});
</script>
<style>
.showtext{box-shadow: 0 0 0 0 #dee0de;animation: pulse2 1.5s infinite;display: flow-root}
@-webkit-keyframes pulse2{0%{-moz-transform:scale(1);-ms-transform:scale(1);-webkit-transform:scale(1);transform:scale(1)}70%{-moz-transform:scale(1);-ms-transform:scale(1);-webkit-transform:scale(1);transform:scale(1);box-shadow:0 0 0 50px rgba(90,153,212,0)}100%{-moz-transform:scale(1);-ms-transform:scale(1);-webkit-transform:scale(1);transform:scale(1);box-shadow:0 0 0 0 rgba(90,153,212,0)}}
.dachon{clear:both;display:none; background: #3e8049; z-index: 9999; text-align: center; color: #fff;font: 600 12px roboto; padding: 5px 5px 5px; border-radius: 14px;}
</style>
Lưu ý: Javascript trên chỉ có tác dụng click 1 lần để add class. Không có chức năng click năng click lần nữa để remove class.
