在jQuery中,如果你想要调整隐藏标签的大小并停止调整可见标签的大小,你可以使用.hide()
和.show()
方法来控制标签的显示和隐藏,同时使用.css()
方法来调整标签的大小。以下是一个示例:
首先,确保你已经在HTML文件中引入了jQuery库:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
然后,你可以使用以下代码来调整隐藏标签的大小并停止调整可见标签的大小:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<script>
$(document).ready(function() {
// 隐藏第二个盒子
$("#box2").hide();
// 调整隐藏盒子的大小
$("#box2").css({
"width": "50px",
"height": "50px"
});
// 显示第二个盒子
$("#box2").show(0); // 使用0毫秒的动画时间,使其立即显示,而不影响大小
});
</script>
</body>
</html>
在这个示例中,我们有两个<div>
标签,分别为box1
和box2
。我们首先隐藏box2
,然后调整其大小,最后立即显示它。注意,我们在show()
方法中使用了0
毫秒的动画时间,这样box2
会立即显示,而不会影响其大小。
如果你想要在显示和隐藏标签时保持其大小不变,可以使用.css()
方法来设置固定的宽度和高度。
领取专属 10元无门槛券
手把手带您无忧上云