如何将多个div合并到引导模式体中

Question

我目前正在尝试在modal-body分区内创建一个带有多个<div>标签的单一模式。

基于我正在做的事情的示例：

HTML:

<div class="modal-body">
<div id="main"> //Main Div or Menu
<div class="card-deck">
<div class="card">
<a href="#" id="gen"> //Gen Trigger
<div class="card-body">
... //Content
</div>
</a>
</div>
<div class="card">
<a href="#" id="light"> //Light Trigger
<div class="card-body">
...
</div>
</a>
</div>

</div>
<div id="gen-content" style="display: none"> //Modal That Gets Triggered.
<div class="card-body p-0 m-0">
<div class="text-right">
<a class="btn btn-danger btn-back" href="#">Back</a>
</div>
Content
</div>
</div>
<div id="light-content" style="display: none"> //Another Modal That Gets Triggered.
<div class="card-body p-0 m-0">
<div class="text-right">
<a class="btn btn-danger btn-back" href="#">Back</a>
</div>
Content
</div>
</div>
</div>

jQuery：

$("#gen").on('click', function() {
$("#main").hide();
$("#gen-content").show();
});
$("#light").on('click', function() {
$("#main").hide();
$("#light-content").show();
});
$(".btn-back").on('click', function(){
$("#gen-content").hide();
$("#main").show();
});

上面的代码运行良好，但单击back按钮会将页面向上滚动到顶部。关闭它会将其重置为原始<section>。这个代码还有什么可以改进的吗？我还认为我对内容触发器进行编码的方式有点长。

Answer 1

通过浏览jQuery论坛找到了一个修复程序。上面写着：

使用return false；单击处理程序结束时，以避免链接上的浏览器默认事件。若和href中的元素不匹配，则默认情况下页面将跳转到顶部。

我使用修复

$("#gen").on('click', function() {
$("#main").hide();
$("#gen-content").show();
return false;
});
$(".btn-back").on('click', function(){
$("#gen-content").hide();
$("#main").show();
return false;
});