Cách dễ nhất để bạn đạt được điều này là ẩn mọi phần, sau đó hiển thị ngay phần bạn muốn hiển thị
Vì vậy, trước tiên, bạn cần chuẩn bị HTML của mình để có thể chọn các khu vực bạn muốn ẩn. Ngay bây giờ, mỗi phần của bạn chỉ là một tiêu đề theo sau là một phần tử đoạn văn. Bạn sẽ muốn bọc từng phần tử đó bên trong một phần tử bằng một ID duy nhất, đồng thời đặt cho mỗi phần tử một tên lớp dùng chung để bạn có thể dễ dàng ẩn tất cả chúng cùng một lúc
- Section One
- Section Two
- Section Three
Section One
Lorem ipsum get some coffee.
Section Two
Lorem ipsum drink that coffee.
Section Three
No coffee no life.
Tiếp theo, hãy tạo một hàm ẩn tất cả các phần
/* JavaScript */
var hideEverything = function hideEverything[] {
var hideableSections = document.querySelectorAll['.hideable-section'];
/* document.querySelectorAll[] will return a JavaScript object
containing all nodes which match the query. Since you are
passing '.hideable-section' the returned object will contain
all elements with that class. */
var keyArray = Object.keys[hideableSections];
/* Object.keys[] returns an array of the keys in an object. In this case
it will return an array of [0,1,2] [assuming the sections I've provided
in this example].*/
keyArray.forEach[function[key]{
hideableSections[key].style.display = 'none';
}];
/* forEach[] is a method that can be called on any array. It
loops through the array and executes the provided callback
function passing as the first parameter each item in the array.
Since this is a list of keys, we can use each one as a key on the
hideableSections JavaScript obect and set the styles from there.*/
}
Chức năng trên có lẽ là phần khó nhất trong toàn bộ điều này, vì nó yêu cầu sự hiểu biết về cách lặp qua các đối tượng trong JavaScript. Bạn không cần phải sử dụng phương pháp tôi đã sử dụng. Nó chỉ là một trong những tôi thích. Bạn có thể dễ dàng thực hiện việc này với vòng lặp
/* JavaScript */
var hideEverything = function hideEverything[] {
var hideableSections = document.querySelectorAll['.hideable-section'];
/* document.querySelectorAll[] will return a JavaScript object
containing all nodes which match the query. Since you are
passing '.hideable-section' the returned object will contain
all elements with that class. */
var keyArray = Object.keys[hideableSections];
/* Object.keys[] returns an array of the keys in an object. In this case
it will return an array of [0,1,2] [assuming the sections I've provided
in this example].*/
keyArray.forEach[function[key]{
hideableSections[key].style.display = 'none';
}];
/* forEach[] is a method that can be called on any array. It
loops through the array and executes the provided callback
function passing as the first parameter each item in the array.
Since this is a list of keys, we can use each one as a key on the
hideableSections JavaScript obect and set the styles from there.*/
}
Đây là một ví dụ về hàm
/* JavaScript */
var hideEverything = function hideEverything[] {
var hideableSections = document.querySelectorAll['.hideable-section'];
/* document.querySelectorAll[] will return a JavaScript object
containing all nodes which match the query. Since you are
passing '.hideable-section' the returned object will contain
all elements with that class. */
var keyArray = Object.keys[hideableSections];
/* Object.keys[] returns an array of the keys in an object. In this case
it will return an array of [0,1,2] [assuming the sections I've provided
in this example].*/
keyArray.forEach[function[key]{
hideableSections[key].style.display = 'none';
}];
/* forEach[] is a method that can be called on any array. It
loops through the array and executes the provided callback
function passing as the first parameter each item in the array.
Since this is a list of keys, we can use each one as a key on the
hideableSections JavaScript obect and set the styles from there.*/
}
/* JavaScript */
var hideEverything = function hideEverything[] {
var hideableSections = document.querySelectorAll['.hideable-section'];
/* document.querySelectorAll[] will return a JavaScript object
containing all nodes which match the query. Since you are
passing '.hideable-section' the returned object will contain
all elements with that class. */
var keyArray = Object.keys[hideableSections];
/* Object.keys[] returns an array of the keys in an object. In this case
it will return an array of [0,1,2] [assuming the sections I've provided
in this example].*/
keyArray.forEach[function[key]{
hideableSections[key].style.display = 'none';
}];
/* forEach[] is a method that can be called on any array. It
loops through the array and executes the provided callback
function passing as the first parameter each item in the array.
Since this is a list of keys, we can use each one as a key on the
hideableSections JavaScript obect and set the styles from there.*/
}
var hideEverything = function hideEverything[] {
var hideableSections = document.querySelectorAll['.hideable-section'];
for [var i = 0; i < hideableSections.length; i++] {
hideableSections[i].style.display = 'none';
}
}
Tiếp theo, chúng tôi sẽ muốn tạo một hàm hiển thị bất kỳ Id phần tử nào mà nó được cung cấp. Chúng ta cũng sẽ để hàm thực thi hàm
/* JavaScript */
var hideEverything = function hideEverything[] {
var hideableSections = document.querySelectorAll['.hideable-section'];
/* document.querySelectorAll[] will return a JavaScript object
containing all nodes which match the query. Since you are
passing '.hideable-section' the returned object will contain
all elements with that class. */
var keyArray = Object.keys[hideableSections];
/* Object.keys[] returns an array of the keys in an object. In this case
it will return an array of [0,1,2] [assuming the sections I've provided
in this example].*/
keyArray.forEach[function[key]{
hideableSections[key].style.display = 'none';
}];
/* forEach[] is a method that can be called on any array. It
loops through the array and executes the provided callback
function passing as the first parameter each item in the array.
Since this is a list of keys, we can use each one as a key on the
hideableSections JavaScript obect and set the styles from there.*/
}
/* JavaScript */
var showSectionWithId = function showSectionWithId[id] {
hideEverything[]; /* This will hide all of the sections with
the class .hideable-section */
var element = document.getElementById[id]; /* Grab the element
you want and assign
it to a variable. */
element.style.display = 'block'; /* Setting 'display' to 'block'
will make it visible. */
}
Tiếp theo, chúng tôi sẽ muốn thiết lập trang bạn muốn nó trông như thế nào khi tải. Có hai cách bạn có thể làm điều này. Bạn có thể thiết lập mọi thứ với CSS
/* CSS */
.hideable-section {
display: none;
}
#section-one {
display: block;
}
Tuy nhiên, bạn không thể làm điều này với CSS và thay vào đó chỉ cần gọi
/* JavaScript */
var hideEverything = function hideEverything[] {
var hideableSections = document.querySelectorAll['.hideable-section'];
/* document.querySelectorAll[] will return a JavaScript object
containing all nodes which match the query. Since you are
passing '.hideable-section' the returned object will contain
all elements with that class. */
var keyArray = Object.keys[hideableSections];
/* Object.keys[] returns an array of the keys in an object. In this case
it will return an array of [0,1,2] [assuming the sections I've provided
in this example].*/
keyArray.forEach[function[key]{
hideableSections[key].style.display = 'none';
}];
/* forEach[] is a method that can be called on any array. It
loops through the array and executes the provided callback
function passing as the first parameter each item in the array.
Since this is a list of keys, we can use each one as a key on the
hideableSections JavaScript obect and set the styles from there.*/
}
Cuối cùng, chúng tôi sẽ cần thêm chức năng của mình vào thuộc tính
/* JavaScript */
var hideEverything = function hideEverything[] {
var hideableSections = document.querySelectorAll['.hideable-section'];
/* document.querySelectorAll[] will return a JavaScript object
containing all nodes which match the query. Since you are
passing '.hideable-section' the returned object will contain
all elements with that class. */
var keyArray = Object.keys[hideableSections];
/* Object.keys[] returns an array of the keys in an object. In this case
it will return an array of [0,1,2] [assuming the sections I've provided
in this example].*/
keyArray.forEach[function[key]{
hideableSections[key].style.display = 'none';
}];
/* forEach[] is a method that can be called on any array. It
loops through the array and executes the provided callback
function passing as the first parameter each item in the array.
Since this is a list of keys, we can use each one as a key on the
hideableSections JavaScript obect and set the styles from there.*/
}
Section One
Section Two
Section Three
Lưu ý rằng đối với mỗi cái chúng tôi đang chuyển qua Id của phần mà chúng tôi muốn hiển thị
Và bạn đã hoàn thành. Đây là ví dụ đầy đủ trên CodePen
MãBútChuyển đổi các phần trong JavaScript
...
Tôi thấy cái đầu tiên hoạt động, nhưng tùy chọn thứ hai với vòng lặp for, ẩn tất cả nội dung
Đó là những gì nó có nghĩa là để làm. Chức năng này,
/* JavaScript */
var hideEverything = function hideEverything[] {
var hideableSections = document.querySelectorAll['.hideable-section'];
/* document.querySelectorAll[] will return a JavaScript object
containing all nodes which match the query. Since you are
passing '.hideable-section' the returned object will contain
all elements with that class. */
var keyArray = Object.keys[hideableSections];
/* Object.keys[] returns an array of the keys in an object. In this case
it will return an array of [0,1,2] [assuming the sections I've provided
in this example].*/
keyArray.forEach[function[key]{
hideableSections[key].style.display = 'none';
}];
/* forEach[] is a method that can be called on any array. It
loops through the array and executes the provided callback
function passing as the first parameter each item in the array.
Since this is a list of keys, we can use each one as a key on the
hideableSections JavaScript obect and set the styles from there.*/
}
và chức năng này
var hideEverything = function hideEverything[] {
var hideableSections = document.querySelectorAll['.hideable-section'];
for [var i = 0; i < hideableSections.length; i++] {
hideableSections[i].style.display = 'none';
}
}
cả hai đều ẩn tất cả nội dung. Chỉ bằng hai cách khác nhau
Sau khi bạn ẩn mọi thứ, sau đó bạn cần hiển thị phần trang bạn muốn hiển thị. Nhìn lại hàm
/* JavaScript */
var hideEverything = function hideEverything[] {
var hideableSections = document.querySelectorAll['.hideable-section'];
/* document.querySelectorAll[] will return a JavaScript object
containing all nodes which match the query. Since you are
passing '.hideable-section' the returned object will contain
all elements with that class. */
var keyArray = Object.keys[hideableSections];
/* Object.keys[] returns an array of the keys in an object. In this case
it will return an array of [0,1,2] [assuming the sections I've provided
in this example].*/
keyArray.forEach[function[key]{
hideableSections[key].style.display = 'none';
}];
/* forEach[] is a method that can be called on any array. It
loops through the array and executes the provided callback
function passing as the first parameter each item in the array.
Since this is a list of keys, we can use each one as a key on the
hideableSections JavaScript obect and set the styles from there.*/
}
/* JavaScript */
var hideEverything = function hideEverything[] {
var hideableSections = document.querySelectorAll['.hideable-section'];
/* document.querySelectorAll[] will return a JavaScript object
containing all nodes which match the query. Since you are
passing '.hideable-section' the returned object will contain
all elements with that class. */
var keyArray = Object.keys[hideableSections];
/* Object.keys[] returns an array of the keys in an object. In this case
it will return an array of [0,1,2] [assuming the sections I've provided
in this example].*/
keyArray.forEach[function[key]{
hideableSections[key].style.display = 'none';
}];
/* forEach[] is a method that can be called on any array. It
loops through the array and executes the provided callback
function passing as the first parameter each item in the array.
Since this is a list of keys, we can use each one as a key on the
hideableSections JavaScript obect and set the styles from there.*/
}
Đầu tiên, nó chạy
/* JavaScript */
var hideEverything = function hideEverything[] {
var hideableSections = document.querySelectorAll['.hideable-section'];
/* document.querySelectorAll[] will return a JavaScript object
containing all nodes which match the query. Since you are
passing '.hideable-section' the returned object will contain
all elements with that class. */
var keyArray = Object.keys[hideableSections];
/* Object.keys[] returns an array of the keys in an object. In this case
it will return an array of [0,1,2] [assuming the sections I've provided
in this example].*/
keyArray.forEach[function[key]{
hideableSections[key].style.display = 'none';
}];
/* forEach[] is a method that can be called on any array. It
loops through the array and executes the provided callback
function passing as the first parameter each item in the array.
Since this is a list of keys, we can use each one as a key on the
hideableSections JavaScript obect and set the styles from there.*/
}
/* JavaScript */
var hideEverything = function hideEverything[] {
var hideableSections = document.querySelectorAll['.hideable-section'];
/* document.querySelectorAll[] will return a JavaScript object
containing all nodes which match the query. Since you are
passing '.hideable-section' the returned object will contain
all elements with that class. */
var keyArray = Object.keys[hideableSections];
/* Object.keys[] returns an array of the keys in an object. In this case
it will return an array of [0,1,2] [assuming the sections I've provided
in this example].*/
keyArray.forEach[function[key]{
hideableSections[key].style.display = 'none';
}];
/* forEach[] is a method that can be called on any array. It
loops through the array and executes the provided callback
function passing as the first parameter each item in the array.
Since this is a list of keys, we can use each one as a key on the
hideableSections JavaScript obect and set the styles from there.*/
}
Ẩn [] trong Javascript là gì?
Phương thức hide[] ẩn các phần tử đã chọn . Mẹo. Điều này tương tự như hiển thị thuộc tính CSS. không ai. Ghi chú. Các phần tử ẩn sẽ hoàn toàn không được hiển thị [không còn ảnh hưởng đến bố cục của trang].
Làm cách nào để ẩn phần tử HTML theo lớp?
Ẩn phần tử theo lớp. .
sử dụng tài liệu. getElementsByClassName[] để chọn các phần tử với lớp cụ thể
Truy cập bộ sưu tập tại một chỉ mục để lấy phần tử bạn muốn ẩn
Đặt kiểu của phần tử. thuộc tính hiển thị thành ẩn
Làm cách nào để hiển thị không sử dụng tên lớp?
1] Sử dụng thuộc tính “hiển thị”
. Tiếp theo, tôi đã gán giá trị thuộc tính hiển thị cho none. Ghi chú. Để hiển thị lại phần tử, hãy đặt kiểu. display = 'chặn';
Làm cách nào để ẩn cảnh báo trong JQuery?
Ẩn thông báo cảnh báo sau vài giây với JQuery? .
Mẹo 1. 1000 ms = 1 giây
Mẹo 2. Chức năng chỉ được thực hiện một lần. Nếu bạn cần thực hiện lặp lại, hãy sử dụng phương thức setInterval[]
Mẹo 3. Sử dụng phương thức clearTimeout[] để ngăn chức năng chạy