Home >Web Front-end >JS Tutorial >A concise summary of several methods of displaying and hiding divs in JQuery_jquery

A concise summary of several methods of displaying and hiding divs in JQuery_jquery

WBOY
WBOYOriginal
2016-05-16 16:03:401311browse

Example

Copy code The code is as follows:

$("#top_notice").css("display", "block");//The first method
//$("#top_notice").attr("style", "display:block;");//The second method
//$("#top_notice").show();//The third method


1. Change the class of the element to hide the div. The premise is that the changed class style defines the hidden attribute
Copy code The code is as follows:

$("#sendPhoneNum").attr("class", "n_input3");

1.2 Set the style attribute to the element
Copy code The code is as follows:

$("#top_notice").attr("style", "display:block;");

2. Use jquery’s css method to set the div to hide
Copy code The code is as follows:

$("#sendPhoneNum").css("display", "none");

3. Use jquery’s show() and hide() methods to set the div to hide
Copy code The code is as follows:

$("#textDiv").show();//Show div
$("#imgDiv").hide();//Hide div

The display and hiding of divs are often used in programming. Here are several methods:

Copy code The code is as follows:

example


1. $("#demo").attr("style","display:none;");//Hide div
$("#demo").attr("style","display:block;");//Display div
2. $("#demo").css("display","none");//Hide div
$("#demo").css("display","block");//Display div
3. $("#demo").hide();//Hide div
$("#demo").show();//Show div
4. $("#demo").toggle(
function () {
               $(this).attr("style","display:none;");//Hide div
},
function () {
​​​​​​ $(this).attr("style","display:block;");//Display div
}
);

For your reference only!
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn