Hướng dẫn toggle javascript onclick - chuyển đổi javascript onclick
Trong quá trình xây dựng website, nếu bạn đang đã gặp phải vấn đề về việc tạo button ẩn hiện một phần tử nào đó, có thể là một phần nội dung, quảng cáo hay bất cứ thứ gì trên trang. Vậy thì bài viết này sẽ là giải pháp cho bạn. Show Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.freetuts.net, không được copy dưới mọi hình thức. Trong bài viết này mình sẽ hướng các bạn tạo một Toggle button có chức năng ẩn/hiện một phần tử. 1. Xây dựng giao diệnBước đầu tiên là chúng ta sẽ xây dựng các thành phần của trang, các bạn tạo file Code
Hai thành phần chính ở đây là button và phần thẻ div chứa nội dung, mình cũng gán luôn sự kiện onclick cho button sẽ gọi hàm myFunction(), cái chúng ta sẽ viết ở bước viết javascript. Bài viết này được đăng tại [free tuts .net] OK giờ chúng ta sẽ chuyển đến bước tiếp theo. 2. Thêm CSS để định dạng các thành phầnTrong bước này chúng ta sử dụng CSS để định dạng cho các thành phần dễ nhìn hơn, các bạn thêm đoạn mã CSS dưới đây vào bên trong thẻ style nhé: .container { width: 700px; margin: auto; text-align: center; } button { margin: auto; width: 100px; height: 30px; margin-bottom: 10px; display: block; } #myDIV { width: 100%; padding: 10px; text-align: center; height: 80px; background: #00FF66; margin-bottom: 30px; display: inline-block; } 3. Xử lí với JavscriptKhi đã có phần giao diện, chúng ta đến bước cuối cùng đó là sử dụng Javascript để xử lí sự kiện khi click vào button, các bạn đoạn script dưới đây vào sau thẻ body: Vậy là xong rồi, giờ các bạn chạy file 4. Lời kếtQua bài viết này, mình đã hướng dẫn các bạn tạo một Toggle button có chức năng ẩn/hiện một phần tử, hi vọng nó sẽ giúp các bạn có thêm sự lựa chọn khi xây dựng website. Nếu có bất cứ thắc mắc gì các bạn hãy để lại ở phần bình luận, hẹn gặp lại trong các bài viết tiếp theo trên freetuts.net Tham khảo: w3schools.com Cách để chuyển đổi ẩn và hiển thịChuyển đổi giữa ẩn và hiển thị một phần tử với JavaScript. Ấn nút! Chuyển đổi (ẩn/hiển thị) một phần tửBước 1) Thêm HTML:Thí dụNhấp vào đây & nbsp; Đây là yếu tố div của tôi. Bước 2) Thêm JavaScript:Thí dụNhấp vào đây & nbsp; Đây là yếu tố div của tôi. Bước 2) Thêm JavaScript: For more information about Display and Visibility, read our CSS Display Tutorial. Chuyển đổi giữa việc thêm và xóa tên lớp khỏi một phần tử bằng JavaScript. Nhấp vào nút để chuyển đổi tên lớp! Chuyển đổi lớp họcBước 1) Thêm HTML:Chuyển đổi giữa việc thêm tên lớp vào phần tử div bằng id = "myDiv" (trong ví dụ này, chúng tôi sử dụng một nút để chuyển đổi tên lớp). Thí dụThử nó & nbsp;Đây là một yếu tố div. Bước 2) Thêm CSS:Thêm tên lớp để chuyển đổi: Thí dụ .MyStyle {& nbsp; & nbsp; width: 100%; & nbsp; & nbsp; padding: 25px; & nbsp;màu nền: san hô; & nbsp;Màu sắc: màu trắng; & nbsp; & nbsp; font-size: 25px;} Bước 3) Thêm JavaScript:Nhận phần tử với ID = "MyDiv" và chuyển đổi giữa lớp "MyStyle": Thí dụ hàm myFunction () {& nbsp;var phần tử = document.getEuityById ("myDiv");& nbsp;Element.ClassList.toggle ("MyStyle");} Hãy tự mình thử » Mẹo: Cũng xem làm thế nào để thêm một lớp. Also see How To Add A Class. Mẹo: Cũng xem làm thế nào để loại bỏ một lớp. Also see How To Remove A Class. Mẹo: Tìm hiểu thêm về thuộc tính danh sách lớp trong tài liệu tham khảo JavaScript của chúng tôi. Learn more about the classList property in our JavaScript Reference. |