Method: 1. Use the "#id" selector to obtain the element object with the specified id, the syntax is "$("#specified id value")"; 2. Use the hide() method or toggle() The method can hide the element object with the specified id. The syntax is "element object.hide()" or "element object.toggle()".
The operating environment of this tutorial: windows10 system, jquery3.2.1 version, Dell G3 computer.
1. Use the id selector to obtain elements
#The id selector selects elements with the specified id .
id refers to the id attribute of the HTML element.
Note: The id attribute must be unique within the document.
Note: Do not use id attributes starting with numbers! This may cause problems in some browsers.
Syntax
$("#id")2. Hide elements
hide() method hides the selected elements.
Tip: This is similar to the CSS property display:none.
Syntax
$(selector).hide(speed,easing,callback)
toggle() method hides elements
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).
Tip: This method can be used to switch between custom functions.
Grammar
$(selector).toggle(speed,easing,callback)
The example is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>132</title>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("#p1").hide();
});
$(".btn2").click(function(){
$("#p1").show();
});
});
</script>
</head>
<body>
<p id="p1">这是一个段落。</p>
<button class="btn1">隐藏</button>
<button class="btn2">显示</button>
</body>
</html>Output result:
Related video tutorial recommendations: jQuery video tutorial
The above is the detailed content of How to hide div based on id in jquery. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
