[英]unordered list jquery shown selected item from list in fixed position
我有一个无序列表。 我必须从列表中选择一个项目并将其显示在固定的空间中。
我的问题是,总是可视化列表的最后一个元素,当我单击其他链接时,最后一个总是在正面。
如何可视化我选择的元素? 我的列表很长,我不能为所有项目制作隐藏命令。
<script>
$(document).ready(function(){
$("#show1").click(function(){
$("#one").show();
});
$("#show2").click(function(){
$("#two").show();
});
$("#show3").click(function(){
$("#three").show();
});
});
<ul id="element">
<li><div id="show1"> showElementOne </div> </li>
<li><div id="show2"> showElementTwo</div> </li>
<li><div id="show3"> showElementThree</div> </li>
</ul>
<div id="one"> <img src="http://www.grandain.com/wp-content/uploads/2014/04/cane_1.jpg" height="402" width="420"> </div>
<div id="two"> <img src="http://www.guidaprodotti.com/immagini/cane.jpg" height="420" width="420"> </div>
<div id="three"> <img src="http://www.spaziosociale.it/public/immagini/22102014152877-canebar.jpg" height="420" width="420"> </div>
</body>
单击div后忘记隐藏其他元素。
像这样更改代码:
$("#show1").click(function(){ $('.view').hide(); // add this to your code to hide your elemets again. $("#one").show(); });
因此,您的列表很长,并且您无法为所有项目制作隐藏命令:将类view
添加到您的div。
我更新了您的小提琴: http : //jsfiddle.net/ymkccefd/2/
您可以使用index
并在图像周围添加包装器
$(document).ready(function() { $("#element div").click(function() { $('.images div').hide(); var index = $(this).parent().index(); $(".images div").eq(index).show(); }); });
.images div { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="element"> <li> <div id="show1">showElementOne</div> </li> <li> <div id="show2">showElementTwo</div> </li> <li> <div id="show3">showElementThree</div> </li> </ul> <div class="images"> <div id="one"> <img src="http://www.grandain.com/wp-content/uploads/2014/04/cane_1.jpg" height="402" width="420"> </div> <div id="two"> <img src="http://www.guidaprodotti.com/immagini/cane.jpg" height="420" width="420"> </div> <div id="three"> <img src="http://www.spaziosociale.it/public/immagini/22102014152877-canebar.jpg" height="420" width="420"> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.