触发模态事件时单击选项卡
Click a tab when a modal event is triggered
我想在模式显示时自动打开第一个选项卡(第一个带有"名称=选项卡"的选项卡)。现在,我必须手动单击选项卡才能显示内容。
这是 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 似乎不支持任何类型的回调或事件。
相关文章:
- 单击选项卡时jquery选项卡选择不起作用
- 单击按钮进入下一个选项卡,而不是单击选项卡
- 单击选项卡时,为什么不在每次单击时切换
- 如何通过单击选项而不是实际按钮本身来选择单选按钮
- 通过单击选项卡而不是单击网站的任何部分来隐藏选项卡
- Jquery Resize问题.如果宽度小于768宽度,请启用“单击选项”.768以上鼠标悬停选项启用
- Angular Bootstrap选项卡在单击选项卡后更改url
- 单击选项卡时要关闭的幻灯片菜单
- 单击选项卡时,页面会在活动后向下跳转
- 当有人单击选项卡“x”时退出反馈弹出窗口
- 模拟单击选项并等待更改事件完成
- 自动单击选项卡 Jquery 带按钮
- 触发模态事件时单击选项卡
- 在单击选项卡式项目时隐藏和创建另一个对象 - HTML CSS
- 通过 JavaScript 链接 href 以单击选项卡中的按钮
- 单击选项卡时在 HTML 中向下跳转
- jQuery 单击选项卡以打开和关闭
- Jquery - 检测禁用的 HTML 选择的单击选项
- 在多个下拉列表中单击选项
- 单击选项卡时如何提交表单