Bài 3: Ẩn hiện nội dung bằng jQuery

Trong bài học này, mình sẽ hướng dẫn các bạn cách làm ẩn hiện nội dung bằng jQuery và ứng dụng vào việc làm form đăng nhập.

Video – Ẩn hiện nội dung bằng jQuery

Bài này tương đội đơn giản, chủ yếu giúp các bạn ôn tập lại cấu trúc câu lệnh của jquery gồm: lựa chọn phần tử – sự kiện tương tác – hiệu ứng. Phần code mẫu của bài này sẽ có 2 file nhé. Một file dùng html và css tự code. Một file dùng bootstrap để căn chỉnh.

"Người ta tắt AdsBlock không phải vì người ta dại, mà người ta quý mình nên coi quảng cáo"

Hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé.
Link đăng ký: NHẬN NGAY ƯU ĐÃI
Nếu các bạn mua hosting từ link trên, mình sẽ có một ít tiền để duy trì. Cảm ơn

Ý tưởng chính

+ dùng 1 class hidden để ẩn nội dung. Hiệu ứng mình dùng để ẩn khá đơn giản, các bạn có thể thêm css để tùy biến thêm. Các bạn có thể tham khảo bài 2 nhé.

+ class hidden sẽ nằm trong form đăng ký.

+ Khi click nút đăng ký, thêm lớp hidden cho form đăng nhập và bỏ class hidden cho form đăng ký.

+ Kiến thức mới: Hàm addClass() và removeClass()

"Ra đời, cuộc sống bươm chải, có làm vẫn không có ăn" nên phải gắn QUẢNG CÁO

Các bạn cần hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé.
Link đăng ký: NHẬN NGAY ƯU ĐÃI
Nếu các bạn mua hosting từ link trên, mình sẽ có một ít tiền để duy trì. Cảm ơn

Hướng dẫn chi tiết

Phần HTML cho 2 form

<div class="main">
   <div class="form" id="form-login">
      <input type="text" placeholder="Username">
      <input type="password" placeholder="password">
      <button>Đăng nhập</button><button type="button" id="btn-dangky">Đăng ký</button>
   </div>
   <div class="form hidden" id="form-dangky">
      <input type="text" placeholder="Username">
      <input type="password" placeholder ="password">
      <input type="password" placeholder="nhập lại pass">
      <button>Đăng Ký</button>
   </div>
</div>

Phần CSS

*{
   margin: 0;
   padding: 0;
}
.main{
   width: 100%;
   height: 1000px;
   background-color: #f5f5f5;
   padding-top: 50px;
}
.form{
   width: 40%;
   height: 300px;
   background-color: white;
   margin: auto;
}
div.form input {
   width: 100%;
   padding: 10px 12px;
   margin-top: 20px;
}
div.form button {
   width: 35%;
   margin-left: 10%;
   margin-top: 20px;
}
.hidden{
   margin-left: -300px;
   opacity: 0;
}

Phần JS – jQuery

$(document).ready(function() {
   $('#btn-dangky').click(function(event) {
      // $('#form-login').animate({marginLeft: -300,opacity: 0});
      // $('#form-dangky').animate({marginLeft: 0,opacity: 1});
      $('#form-login').addClass('hidden');
      $('#form-dangky').removeClass('hidden');
   });
});

Code mẫu: Download

Code mẫu có Bootstrap: Download

Nếu có thắc mắc, hãy đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.

Liên hệ