Home >Web Front-end >Front-end Q&A >How to hide div elements in jquery's position
How to hide div elements in jquery's position
- 青灯夜游Original
- 2022-12-16 18:15:282573browse
In jquery, you can use the css() method to set the visibility or opacity style for the div element to occupy the position and hide the div element. Implementation steps: 1. Use the jquery selector to obtain the div element object, the syntax "$("selector")"; 2. Use css() to hide the div element, the syntax "element object.css("visibility","hidden") ;" or "ElementObject.css('opacity',0);".
The operating environment of this tutorial: windows7 system, jquery3.6.1 version, Dell G3 computer.
In jquery, you can use the css() method to set the visibility or opacity style for the div element to occupy the position and hide the div element.
Method 1. Use css() to add visibility: hidden; style to the element, and set the invisible
visibility attribute to specify whether the element is visible.
visibility: hidden; style hides the corresponding element, but retains the original space in the document flow, and the resource will be loaded.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-3.6.1.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$(".visibility").css("visibility","hidden");
});
});
</script>
</head>
<body>
<div>正常显示的div元素</div>
<div class="visibility">需要隐藏的div元素</div>
<div>正常显示的div元</div>
<br>
<button>占位置隐藏元素</button>
</body>
</html>
Method 2: Use css() to add opacity:0; Style, set the transparency of the element to 0
The opacity attribute means to set the transparency of an element. It is not designed to change the bounding box of an element.
This means that setting opacity to 0 only visually hides the element. The element itself still occupies its own position and contributes to the layout of the web page. This is similar to visibility: hidden above.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-3.6.1.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$(".opacity").css('opacity',0);
});
});
</script>
</head>
<body>
<div>正常显示的div元素</div>
<div class="opacity">需要隐藏的div元素</div>
<div>正常显示的div元</div>
<br>
<button>占位置隐藏元素</button>
</body>
</html>
Extended knowledge: jquery’s built-in method of hiding elements
jquery is built-in Multiple ways to hide elements. Here are some commonly used ones:
show() and hide() methods
show() can display hidden
$(".btn2").click(function(){
$("p").show();
});
hide() can hide visible
elements:
$(".btn1").click(function(){
$("p").hide();
});This function is often used with show
toggle() method
toggle() method switches the visible state of an element.
If the selected elements are visible, then hide these elements. If the selected elements are hidden, then display these elements.
<html>
<head>
<script src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$("p").toggle(1000);
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">Toggle</button>
</body>
</html>slideDown() method
Show hidden
elements in a sliding manner:
$(".btn2").click(function(){
$("p").slideDown();
});Related tutorials Recommended: jQuery video tutorial
The above is the detailed content of How to hide div elements in jquery's position. For more information, please follow other related articles on the PHP Chinese website!