Question

我正在尝试使用活动链接打开模态中的选项卡，但最初打开模态时没有选项卡处于活动状态但单击选项卡时它会起作用。

这是我的HTML：

array_walk_recursive

protected function setData($key, $value)
{
    array_walk_recursive($value, function (&$item, $key) {
        $item = null === $item ? '' : $item;
    });
    $this->data[$key] = $value;
    return $this->data;
}

Answer 1

使用active选项进行初始化时，您可以激活第一个标签页。我修改你的HTML工作。请参阅代码段。

   $('ul.tabs').tabs({ active: 0 }); // O is index of tab

＆＃13;

$('#tab').tabs({
  active: 0
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />

<div id="modal1" class="modal">
  <div class="modal-content">
    <div id='tab'>
      <ul class="tabs">
        <li><a id="t1" class="active" href="#test1">Tab 1</a></li>
        <li><a id="t2" href="#test2">Tab 2</a></li>
        <li><a id="t3" href="#test3">Tab 3</a></li>
      </ul>
      <div id="test1">
        Tab 1 content
      </div>
      <div id="test2">
        Tab 2 content
      </div>
      <div id="test3">
        Tab 3 content
      </div>
    </div>

  </div>
</div>

＆＃13;

Answer 2

尝试代码：

使用JqueryUi脚本

使用JqueryUI StyleSheet

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$("#modal1").tabs();
});
</script>
<div id="modal1" class="modal" >
    <div class="modal-content">
        <div >
            <ul class="tabs">
                <li><a id="t1" class="active" href="#test1">Tab 1</a></li>
                <li><a id="t2" href="#test2">Tab 2</a></li>
                <li><a id="t3" href="#test3">Tab 3</a></li>
            </ul>
      
        <div id="test1">
            Tab 1 content
        </div>
        <div id="test2">
            Tab 2 content
        </div>
        <div id="test3">
            Tab 3 content
        </div>
    </div>
</div>
  </div>

＆＃13;

Answer 3

使用导入脚本：

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

标签活动链接不在模态中工作

3 个答案: