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

0

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.

Ý 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()

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ệ

Để lại một trả lời

Địa chỉ email của bạn sẽ không được công bố.