触发模态事件时单击选项卡

Click a tab when a modal event is triggered

本文关键字:单击 选项 事件 模态      更新时间:2023-09-26

我想在模式显示时自动打开第一个选项卡(第一个带有"名称=选项卡"的选项卡)。现在,我必须手动单击选项卡才能显示内容。

这是 HTML 选项卡和模态标记

<div class="col s12 m6 l3">
    <div class="card">
        <a class="modal-trigger" href="#abc">
        <div class="card-image">
        </div>
        </a>
        <div class="card-content">
          <span class="card-title activator grey-text text-darken-4"></span>
        </div>
    </div>
</div>

<div id="abc" class="modal">
        <div class="row"><h4></h4></div>
        <div class="row">
        <ul class="tabs">
            <li>
                <input type="radio" name="tabs" id="tab29" />
                <label  for="tab29"></label>
                <div id="tab-content29" class="tab-content">
                  <p></p>
                </div>
            </li>
            <li>
                <input type="radio" name="tabs" id="tab30" />
                <label for="tab30"></label>
                <div id="tab-content30" class="tab-content">
                </div>
            </li>
            <li>
                <input type="radio" name="tabs" id="tab31" />
                <label for="tab31"></label>
                <div id="tab-content31" class="tab-content">
                    <p></p>
                </div>
            </li>
            <li>
                <input type="radio" name="tabs" id="tab32" />
                <label for="tab32">Contact</label>
                <div id="tab-content32" class="tab-content">
                </div>
            </li>
    </ul>
    </div><!-- Container 

这是触发模态的 JS

   $(document).ready(function(){
       $('.modal-trigger').leanModal(
        {
        dismissible: true, // Modal can be dismissed by clicking outside of the modal
        opacity: .4, // Opacity of modal background
        in_duration: 150, // Transition in duration
        out_duration: 150, // Transition out duration
        }
    );
    });

由于 LeanMdal 没有回调方法,您可以通过创建这样的单独点击事件来实现这一点

$('.modal-trigger').on("click", function(){
    $('ul.tabs li:first').click();
})

最简单的方法是将任何类控制选项卡可见性直接添加到HTML中。 leanModal 似乎不支持任何类型的回调或事件。