我试图在单击按钮时显示多个 div。例如,我想仅在单击 Button1 时显示所有 id=div1 的 div。同样,仅在单击 Button2 时显示所有 id=div2 的 div。其他幻灯片的数量也在增加。
HTML:
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="divA">
<div class="divAA">
<div id="div1" class="targetDiv">
<p>Div1 Intro: Hidden until Button1 is clicked</p>
</div>
</div>
<p>
Div1 Short to be shown by default.
<span id="div1" class="targetDiv">Hidden span until Button1 is clicked</span>
</p>
<a class="showSingle" target="1">Button1</a>
<div class="divAAA">
<div id="div1" class="targetDiv">
<p>
Div1 Details: Hidden until Button1 is clicked.
</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="divB">
<div class="divBB">
<div id="div2" class="targetDiv">
<p>Div2 Intro: Hidden until Button1 is clicked
<span id="div2" class="targetDiv">Hidden span until Button1 is clicked</span>
</p>
</div>
</div>
<p>
Div2 Short
</p>
<a class="showSingle" target="2">Button2</a>
<div id="div2" class="targetDiv">
<p>
Div2 Details: Hidden until Button2 is clicked. Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked. YOLO.
</p></div>
</div>
</div>
<div class="item">
3
</div>
<div class="item">
4
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
Javascript:
jQuery(function(){
jQuery('.showSingle').click(function(){
jQuery('.targetDiv').hide();
jQuery('#div'+jQuery(this).attr('target')).show();
});
});
最佳答案
您不能对多个元素使用相同的 ID。您需要将 ID 更改为类。
您最初可以使用 CSS - display:none
隐藏它们,然后在单击按钮时可以使用类选择器而不是 id 选择器来显示它们。
这里是修改后的代码。
如果您更喜欢 fiddle :https://jsfiddle.net/ga6gmy8m/2/
jQuery(function(){
jQuery('.showSingle').click(function(){
jQuery('.targetDiv').hide();
jQuery(this).hide(); jQuery('.div'+jQuery(this).attr('target')).show();
});
});
.carousel {
height: 200px;
overflow-x: hidden;
overflow-y: scroll;
}
.item {
text-align: center;
}
.div2,.div1{
display:none;
}
.showSingle {
border: 1px solid #000;
padding: 5px 10px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="divA">
<div class="divAA">
<div class="div1" class="targetDiv">
<p>Div1 Intro: Hidden until Button1 is clicked</p>
</div>
</div>
<p>
Div1 Short to be shown by default.
<span class="div1" class="targetDiv">Hidden span until Button1 is clicked</span>
</p>
<a class="showSingle" target="1">Button1</a>
<div class="divAAA">
<div class="div1" class="targetDiv">
<p>
Div1 Details: Hidden until Button1 is clicked.
</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="divB">
<div class="divBB">
<div class="div2" class="targetDiv">
<p>Div2 Intro: Hidden until Button1 is clicked
<span class="div2" class="targetDiv">Hidden span until Button1 is clicked</span>
</p>
</div>
</div>
<p>
Div2 Short
</p>
<a class="showSingle" target="2">Button2</a>
<div class="div2" class="targetDiv" style="display:none">
<p>
Div2 Details: Hidden until Button2 is clicked. Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked. YOLO.
</p></div>
</div>
</div>
<div class="item">
3
</div>
<div class="item">
4
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
关于javascript - 在 Bootstrap Carousel 中单击时显示多个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37922119/