使用 jquery 动态设置活动选项卡答案

【问题标题】：Dynamically set active tab with jquery使用 jquery 动态设置活动选项卡
【发布时间】：2018-05-13 12:05:26
【问题描述】：

我正在尝试动态设置选项卡。我已经搜索了网络，但解决方案不起作用。这是我的代码。

<ul id="memnav" class="nav nav-tabs">
    <li class="active">
    <a class="dropdown-toggle" data-toggle="tab" href="#publication-tab">
        Publications
    </a>
    </li>
    <li><a data-toggle="tab" href="#project-tab">Projects</a></li>
    <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
        About me
        <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
        <li><a data-toggle="tab" href="#education-tab">Education</a></li>
        <li><a data-toggle="tab" href="#career-tab">Career</a></li>
        <li><a data-toggle="tab" href="#contact-tab">Contact</a></li>
    </ul>
    </li>
</ul>

在脚本中

var active_tab = sessionStorage.getItem('active_tab');
        if(active_tab){
            $("#memnav").tabs().tabs( "option", "active", active_tab);
        }

但它会抛出这个错误

未捕获的错误：jQuery UI 选项卡：片段标识符不匹配。

我也将“ul”放在“div”中，但显示相同的错误

【问题讨论】：

不应该删除重复的 .tabs() 吗？
如果我删除第一个它会给我另一个错误。
怎么样：$('#memnav a').on('click', function(){$('#memnav .active').removeClass('active');$(this).closest('li').addClass('active');});？
你想要点击还是加载页面？？
不，我不想点击。实际上，目标在其他选项卡上，有一些更新按钮，因此在更新返回的页面后应该在上一个事件发生的选项卡上处于活动状态。

标签： javascript jquery jquery-ui-tabs

【解决方案1】：

只需使用addClass
添加.eq() :https://api.jquery.com/eq/

$(document).ready(function(){
var i=0;//get from storrage
$("#memnav li").eq(i).addClass('active');
});

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul id="memnav" class="nav nav-tabs">
    <li>
    <a class="dropdown-toggle" data-toggle="tab" href="#publication-tab">
        Publications
    </a>
    </li>
    <li><a data-toggle="tab" href="#project-tab">Projects</a></li>
    <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
        About me
        <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
        <li><a data-toggle="tab" href="#education-tab">Education</a></li>
        <li><a data-toggle="tab" href="#career-tab">Career</a></li>
        <li><a data-toggle="tab" href="#contact-tab">Contact</a></li>
    </ul>
    </li>
</ul>

【讨论】：

告诉我更多帮助
我不想让第一个 li 元素处于活动状态，它可以是任何人。它必须是动态的
对你有帮助吗？？
是的，它有点帮助，但并不完全。 tab li 元素显示为活动状态，但对应的 div 未显示
谢谢，虽然它对我来说并不完全有效，但它向我展示了如何解决的路径。谢谢

【解决方案2】：

你也可以试试这个:)

$(document).ready(function(){
	var active_tab = '#publication-tab';
	$('#memnav').find('a[href="'+active_tab+'"]').parent().addClass('active');
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul id="memnav" class="nav nav-tabs">
    <li>
    <a class="dropdown-toggle" data-toggle="tab" href="#publication-tab">
        Publications
    </a>
    </li>
    <li><a data-toggle="tab" href="#project-tab">Projects</a></li>
    <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
        About me
        <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
        <li><a data-toggle="tab" href="#education-tab">Education</a></li>
        <li><a data-toggle="tab" href="#career-tab">Career</a></li>
        <li><a data-toggle="tab" href="#contact-tab">Contact</a></li>
    </ul>
    </li>
</ul>

【讨论】：