javascript - 单击转到模态部分

Question

这是我想要实现的:

模态框有 4 个部分，每个部分使用 .load() 将其内容动态加载到右侧的容器中。

问题是我在打开模式的页脚中有一个菜单，应该将用户放在正确的部分:

我只是不知道如何制作它，例如，如果我点击页脚菜单“metodos de pago”它会在指定部分打开模式 .关于如何做的任何想法？

这是我加载模态的脚本:

function loadmodal(){
     $('.info_modal').fadeIn();
}

这是我的脚本，用于在单击左侧菜单后加载模态中各部分的内容:

function loadcontent(){
     $('.info_modal_content').load('includes/text2.html');
}

模态标记:

    <div class="info_modal">
        <div class="info_modal_container">
            <h2>Guia de compra</h2>
            <hr>
            <ul class="info_modal_menu">
                <li>
                    <a href="javascript:void(0)">Como Comprar</a>
                </li>
                <li>
                    <a href="javascript:void(0)" onclick="loadcontent()">Metodos de pago</a>
                </li>
                <li>
                    <a href="javascript:void(0)">Cambios y devoluciones</a>
                </li>
                <li>
                    <a href="javascript:void(0)">Tarjeta regalo</a>
                </li>
            </ul>
            <div class="info_modal_content">
                <h2>TARGETA PUEDES COMPRARLA EN...</h2>
                <p>Tu tarjeta puede ser rechazada por una de las</p>
            </div>

            <a href="javascript:void(0)" class="close_contact" onclick="closecontactmodal()"></a>
        </div>
    </div>

Answer 1

为什么不通过 URL 进行初始加载？

假设您的页脚结构如下:

<footer>
  <ul>
    <li><a href="text1.html" class="openModal">Text 1</a></li>
    <li><a href="text2.html" class="openModal">Text 2</a></li>
    <li><a href="text3.html" class="openModal">Text 3</a></li>
    <li><a href="text4.html" class="openModal">Text 4</a></li>
  </ul>
</footer>

然后您可以将处理程序附加到 .openModal:

$('.openModal').on('click', function(e){
  e.preventDefault();

  var toLoad = $(this).attr('href');

  $('.info_modal_content').load(toLoad);

  $('.info_modal').fadeIn();
});