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

时间:2015-01-20 18:13:22

标签: javascript tabs modal-dialog

我想在模态显示时自动打开第一个标签(第一个标签带" names =标签")。现在,我必须手动点击标签来显示内容。

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

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

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

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