Html 如何在引导模式主体中合并多个div？

我目前正在尝试在

模态体

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论坛找到了一个解决方案。内容如下：

使用返回假；在单击处理程序的末尾，避免链接上的浏览器默认事件。如果href中的元素不匹配，默认情况下页面将跳转到顶部

我通过使用以下方法进行修复：

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

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

---

插入css或引导插件链接

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

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