选项卡内的选项卡不起作用

时间:2016-07-25 19:24:27

标签: jquery html css materialize

https://codepen.io/simii/pen/grvxbE

继承人。

<div class="row">
    <div class="col s12">
      <ul class="tabs2">
        <li class="tab col s3"><a href="#test1">Test 1</a></li>
        <li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
        <li class="tab col s3 disabled"><a href="#test3">Disabled Tab</a></li>
        <li class="tab col s3"><a href="#test4">Test 4</a></li>
      </ul>
    </div>
    <div id="test1" class="col s12">Test 1</div>
    <div id="test2" class="col s12">
  <div class="row">
    <div class="col s12">
      <ul class="tabs">
        <li class="tab col s3"><a href="#test1">Test 1</a></li>
        <li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
        <li class="tab col s3 disabled"><a href="#test3">Disabled Tab</a></li>
        <li class="tab col s3"><a href="#test4">Test 4</a></li>
      </ul>
    </div>
    <div id="test1" class="col s12">Test 1</div>
    <div id="test2" class="col s12">Test 2</div>
    <div id="test3" class="col s12">Test 3</div>
    <div id="test4" class="col s12">Test 4</div>
  </div>
        </div>
    <div id="test3" class="col s12">Test 3</div>
    <div id="test4" class="col s12">Test 4</div>
  </div>


 $(document).ready(function(){
$('ul.tabs2').tabs();
$('ul.tabs').tabs();
});

它使用带有jquery的materialize框架。我不知道要改变什么才能让它发挥作用。

另一个标签内的标签

2 个答案:

答案 0 :(得分:0)

标签在默认情况下适用于链接,按钮,表单元素等。

为了让它们处理其他元素,请添加tabindex属性:

但是,如果您的页面上有按钮或表单,则必须注意标签索引与这些元素一起工作 - 标签顺序是“正确的”。

答案 1 :(得分:0)

<li class="tab col s3"><a href="#test1">Test 1</a></li>

在本节中,href是关键参与者,您提供的ID对于内部表也必须是唯一的。

请查看更新的Codepen,内部标签也可以使用

https://codepen.io/KunalMZ/pen/ZOoVjp?editors=1010