[英]Show multiple div when clicked in Bootstrap Carousel
I'm trying to show multiple div when a button is clicked. 我试图在单击按钮时显示多个div。 For instance, I want to show all the divs with id=div1 only when Button1 is clicked.
例如,我只想单击Button1时显示id = div1的所有div。 Likewise, show all the divs with id=div2 only when Button2 is clicked.
同样,仅在单击Button2时显示id = div2的所有div。 The same goes for other slides too in increasing number.
其他幻灯片的数量也越来越多。
HTML: 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: Javascript:
jQuery(function(){
jQuery('.showSingle').click(function(){
jQuery('.targetDiv').hide();
jQuery('#div'+jQuery(this).attr('target')).show();
});
});
Assign a class to the elements(divs) you want to show when a div is clicked. 将一个类分配给要在单击div时显示的元素(div)。 Make one class that can be assigned to those divs.
制作一个可以分配给这些div的类。 Remember do not assign same ID's to the element since it can be a problem.
请记住不要为元素分配相同的ID,因为这可能是一个问题。
You cannot use same id for multiple elements. 您不能对多个元素使用相同的ID。 You need to change the id's to class.
您需要将ID更改为class。
You can hide them initially using CSS - display:none
, Then on button click it can be showed using the class selector instead of id selector. 您可以使用CSS-
display:none
最初隐藏它们,然后单击按钮可以使用类选择器而不是id选择器显示它们。
Here is the changed code. 这是更改后的代码。
In case you prefer a fiddle : https://jsfiddle.net/ga6gmy8m/2/ 如果您喜欢小提琴: 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.