Динамически установить активную вкладку с JQuery - PullRequest
Новая
       36

Динамически установить активную вкладку с JQuery

0 голосов
/ 13 мая 2018

Я пытаюсь установить активную вкладку динамически. У меня есть поиск в сети, но решения не работают. Вот мой код. 

<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);
        }

Но выдает эту ошибку

Uncaught Ошибка: вкладки пользовательского интерфейса jQuery: несоответствие идентификатора фрагмента.

Я также поместил "ul" внутри "div", но он показывает ту же ошибку

Ответы [ 2 ]

0 голосов
/ 13 мая 2018

Вы также можете попробовать это :) 

$(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>
0 голосов
/ 13 мая 2018

просто используйте 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>
...