[英]Dynamically set active tab with jquery
我正在尝试将标签动态设置为活动。 我已经在网上搜索了,但解决方案不起作用,这是我的代码。
<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”中,但显示相同的错误
只需使用addClass
添加.eq()
: https : .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>
您也可以尝试:)
$(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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.