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

Question

我想在模式显示时自动打开第一个选项卡（带有“names=tabs”的第一个选项卡）。现在，我必须手动单击选项卡才能显示内容。

这是 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
        }
    );
    });

Answer 1

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

Answer 2

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

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

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

Click a tab when a modal event is triggered

javascript

tabs

modal-dialog

这是 HTML 选项卡和模式标记