Home  >  Article  >  Web Front-end  >  How to prevent div from displaying in jquery

How to prevent div from displaying in jquery

coldplay.xixi
coldplay.xixiOriginal
2020-11-24 15:50:383401browse

Jquery method to make div not display: 1. Use the [attr()] method with the display attribute to make the div not display; 2. Use the [CSS()] method with the display attribute to make the div not display; 3. Use the [hide()] method to prevent the div from displaying.

How to prevent div from displaying in jquery

The operating environment of this tutorial: windows7 system, jquery3.5.1 version. This method is suitable for all brands of computers.

Jquery method to prevent div from displaying:

Method 1: Use the attr() method with the display attribute to prevent div from displaying

$("div").attr("style","display:none;");//隐藏div

Expansion:

$("div").attr("style","display:block;");//显示div

Method 2: Use the CSS() method with the display attribute to prevent the div from displaying

$("div").css("display","none");//隐藏div

Extension:

$("div").css("display","block");//显示div

Method 3: Use the hide() method to prevent the div from displaying

hide() method hides the selected element.

Tip: This is similar to the CSS property display:none.

  • Note: Hidden elements will not be fully displayed (no longer affect the layout of the page).

Tip: To show hidden elements, check out the show() method.

Example:

$("div").hide();//隐藏div
$("div").show();//显示div

Note:

  • $("div").show() means display:block,

  • $("div").hide() means display:none;

Method 4: Use the toggle() method to make the div not display

The toggle() method switches between hide() and show() on the selected element.

This method checks the visible status of the selected element. If an element is hidden, show() is run, if an element is visible, hide() is run - this creates a toggle effect.

Note: Hidden elements will not be fully displayed (no longer affect the layout of the page).

Example:

$("div").toggle(//动态显示和隐藏
         function () { 
              $(this).attr("style","display:none;");//隐藏div
         },
         function () {    
              $(this).attr("style","display:block;");//显示div
         }
      );

Related free learning recommendations:JavaScript(Video)

The above is the detailed content of How to prevent div from displaying in jquery. For more information, please follow other related articles on the PHP Chinese website!

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