Question

我正在尝试在页面刷新后选择最后一个选项卡。我的代码如下。通过此代码，第一个选项卡在页面重新加载后处于活动状态。

的javascript

<script>
      $(function() {
      $( "#tabs" ).tabs();
      });

    </script>

HTML：

<body>
    <div id='childarpt' class='childarpt' ></br>
    <div id="tabs"><ul>
    <li class="active"><a href="#Total"><span>Total</span></a></li>
    <li><a href="#USA"><span>USA</span></a></li>
    <li><a href="#ASIA"><span>ASIA</span></a></li>
    <li><a href="#JAPAN"><span>JAPAN</span></a></li>
    <li><a href="#LATAM"><span>LATAM</span></a></li>
    <li><a href="#EMEA"><span>EMEA</span></a></li>
    </ul>
    <table id='myTable' border='0'>

     <div id="Total" class="tab active">
     Total
     </div>
     <div id="USA" class="tab">
     USA
    </div>
    <div id="ASIA" class="tab">
    ASIA
    </div>
    <div id="JAPAN" class="tab">
    JAPAN
     </div>
      <div id="LATAM" class="tab">
      LATAM
     </div>
     <div id="EMEA" class="tab">
     EMEA
    </div>

     </table>
     </div>
     </body>

Answer 1

快速而肮脏的问题解决方案

There\'s Max

您需要更改状态的存储和加载，但这会让您失望。

Answer 2

而不是

$(function() { $( "#tabs" ).tabs(); });

试试这个：

$( "#tabs" ).tabs({ active: 5 });

这将使第六个（零索引）选项卡成为默认的活动选项卡。

供您参考：http://api.jqueryui.com/tabs/

Answer 3

请参阅Bootstrap 3: Keep selected tab on page refresh，其中包含实现所需内容所需的所有信息。

这个想法是将选定的选项卡存储在窗口的哈希值中。选择另一个选项卡时更改位置的哈希值。

页面刷新后，所选选项卡无效

3 个答案: