Question

现在我有一个锚点链接，点击后打开一个模态窗口。在模态窗口里面我有两个标签。

单击链接时，将打开模态并显示选项卡。

以下是代码：

<a href="#"  data-reveal-id="myModal" data-animation="fade" >Weekly Schedule</a>

这是带有标签的模态窗口：

<div id="myModal" class="reveal-modal">
<a class="close-reveal-modal">&#215;</a>

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Schedule 1</a></li>
    <li><a href="#tabs-2">Schedule 2</a></li>

  </ul>
  <div id="tabs-1">
Schedule 1 content
</div>

<div id="tabs-2">
Schedule 1 content
</div>

</div>
</div>

这是JSFiddle： http://jsfiddle.net/3npaykxd/7/

工作正常。但现在我想更改锚点链接以选择下拉列表。这样每当用户更改选项时。打开模态窗口，默认情况下打开所选选项选项卡。

像这样：

<select name="schedule">
<option value="">Please Select schedule </option>
<option value="0">Schedule 1 </option>
<option value="1">Schedule 2</option>
</select>

因此，选择选项1将打开模态窗口，其中标签1在其中默认打开。同样，选择标签2将打开模式，标签2在其中默认打开。

我如何实现这一目标？

艾哈迈尔

Answer 1

感谢：How do I open a tab from with jQuery UI Tabs from an link outside of the div?

当选择框更改时，标签也会更改。这是jsFiddle：http://jsfiddle.net/3npaykxd/8/

$('#schedule').on('change',function(e){
    console.log($(this).val());
   $( "#tabs" ).tabs("select",$(this).val());
})

我认为你可以自己处理fadeIn / fadeOut

使用select的Jquery模态+默认选项卡

1 个答案: