lan*_*ane 6 javascript jquery click button display
我需要一些帮助.正如您将在我的小提琴中看到的那样,我试图使用按钮来填充单个容器div,其中包含来自多个隐藏div的内容,具体取决于单击的按钮.我遇到的问题是,我不知道如何访问隐藏div中的实际内容来填充容器div.截至目前,我正在使用隐藏div的id属性来演示我想在容器中显示哪个div内容.
我已经看过其他一些链接<a>属性引用隐藏内容的帖子,但到目前为止还没有使用带有点击功能的按钮元素来更改div内容.
非常感谢您的帮助.我相信你能理解......它让我夜不能寐.哈!
jQuery(function ($) {
$('#button1').click(function () {
$('#info').empty();
$('#info').prepend('#option1');
});
$('#button2').click(function () {
$('#info').empty();
$('#info').prepend('#option2');
});
$('#button3').click(function () {
$('#info').empty();
$('#info').prepend('#option3');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button-panel">
<ul id="button-column" style="list-style: none;">
<li class="buttons"><button id="button1">Button 1</button></li>
<li class="buttons"><button id="button2">Button 2</button></li>
<li class="buttons"><button id="button3">Button 3</button></li>
</ul>
</div>
<div id="info-div">
<div id="info"></div>
</div>
<div id="hiddenDivs" style="display:none;">
<div class="info" id="option1">Box</div>
<div class="info" id="option2">Google Drive</div>
<div class="info" id="option3">Box</div>
</div>这是我的小提琴
这是一个使用 jquery 数据属性的版本。它减少了冗余和复杂性，并且可以轻松配置。
<body>
<div class="button-panel">
<ul id="button-column" style="list-style: none;">
<li class="buttons"><button id="button1" data-link="option1">Button 1</button></li>
<li class="buttons"><button id="button2" data-link="option2">Button 2</button></li>
<li class="buttons"><button id="button3" data-link="option3">Button 3</button></li>
</ul>
</div>
<div id="info-div">
<div id="info">
</div>
</div>
<div id="hiddenDivs" style="display:none;">
<div class="info" id="option1">Box</div>
<div class="info" id="option2">Google Drive</div>
<div class="info" id="option3">Box</div>
</div>
</body>
<script>
$('.buttons button').click(function (){
$('#info').empty();
$('#info').html($("#" + $(this).data('link')).html());
});
</script>
示例： https: //jsfiddle.net/yvsu6qfw/3/