极客教程JavaScript 如何和Bootstrap默认隐藏div元素并在点击时显示
任务是使用Bootstrap在点击时显示隐藏的div。下面讨论了两种解决此问题的方法：
方法1
- 将需要显示的div的 display: none 属性设置为隐藏。
- 使用 .show()方法 来显示div元素。
示例： 此示例实现了上述方法。
<head>
<style>
#div {
display: none;
background: green;
height: 100px;
width: 200px;
color: white;
}
</style>
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<p id="GFG_UP"></p>
<div id="div">
This is Div box.
</div>
<br>
<button onClick="GFG_Fun()">
click here
</button>
<br>
<p id="GFG_DOWN" style="color: green;"></p>
<script>
('#GFG_UP').text(
"Click on button to toggle the DIV Box using Bootstrap.");
function show(divId) {
("#" + divId).show();
}
function GFG_Fun() {
show('div');
$('#GFG_DOWN').text("DIV Box is visible.");
}
</script>
</body>
输出：
方法2
- 将需要显示的div的 display: none 属性设置为隐藏。
- 使用 .toggle()方法 来显示该div。然而，该方法也可以用于再次隐藏div。
示例： 此示例实现了上述方法。
<head>
<style>
#div {
display: none;
background: green;
height: 100px;
width: 200px;
color: white;
}
</style>
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<p id="GFG_UP">
</p>
<div id="div">
This is Div box.
</div>
<br>
<button onClick="GFG_Fun()">
click here
</button>
<br>
<p id="GFG_DOWN" style="color: green;">
</p>
<script>
('#GFG_UP').text(
"Click on button to toggle the DIV Box using Bootstrap.");
function toggler(divId) {
("#" + divId).toggle();
}
function GFG_Fun() {
toggler('div');
$('#GFG_DOWN').text("DIV Box is toggling.");
}
</script>
</body>
输出：
