Bootstrap 3: Сохранить выбранную вкладку на странице обновления

Question

Я пытаюсь сохранить выбранную вкладку активную при обновлении с помощью Bootstrap 3. Пробовал и проверял с некоторым вопросом, который уже задавался здесь, но ни одна работа для меня. Не знаю, где я ошибаюсь. Вот мой код

HTML

<!-- tabs link --> 
<ul class="nav nav-tabs" id="rowTab"> 
    <li class="active"><a href="#personal-info" data-toggle="tab">Personal Information</a></li> 
    <li><a href="#Employment-info" data-toggle="tab">Employment Information</a></li> 
    <li><a href="#career-path" data-toggle="tab">Career Path</a></li> 
    <li><a href="#warnings" data-toggle="tab">Warning</a></li> 
</ul> 
<!-- end: tabs link --> 

<div class="tab-content"> 
    <div class="tab-pane active" id="personal-info"> 
     tab data here... 
    </div> 

    <div class="tab-pane" id="Employment-info"> 
     tab data here... 
    </div> 

    <div class="tab-pane" id="career-path"> 
     tab data here... 
    </div> 

    <div class="tab-pane" id="warnings"> 
     tab data here... 
    </div> 
</div> 

Javascript:

// tab 
$('#rowTab a:first').tab('show'); 

//for bootstrap 3 use 'shown.bs.tab' instead of 'shown' in the next line 
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 
//save the latest tab; use cookies if you like 'em better: 
localStorage.setItem('selectedTab', $(e.target).attr('id')); 
}); 

//go to the latest tab, if it exists: 
var selectedTab = localStorage.getItem('selectedTab'); 
if (selectedTab) { 
    $('#'+selectedTab).tab('show'); 
} 

Answer 1

Я предпочитаю хранить выбранную вкладку в значении хэша окна. Это также позволяет отправлять ссылки коллегам, которые видят «ту же» страницу. Хитрость заключается в изменении хэша местоположения при выборе другой вкладки. Если вы уже используете # на своей странице, возможно, нужно разделить хэш-тег. В моем приложении я использую «:» как разделитель значений хэша.

<ul class="nav nav-tabs" id="myTab"> 
    <li class="active"><a href="#home">Home</a></li> 
    <li><a href="#profile">Profile</a></li> 
    <li><a href="#messages">Messages</a></li> 
    <li><a href="#settings">Settings</a></li> 
</ul> 

<div class="tab-content"> 
    <div class="tab-pane active" id="home">home</div> 
    <div class="tab-pane" id="profile">profile</div> 
    <div class="tab-pane" id="messages">messages</div> 
    <div class="tab-pane" id="settings">settings</div> 
</div> 

JavaScript, должен быть встроен после того, как указано выше, в <script>...</script> части.

$('#myTab a').click(function(e) { 
    e.preventDefault(); 
    $(this).tab('show'); 
}); 

// store the currently selected tab in the hash value 
$("ul.nav-tabs > li > a").on("shown.bs.tab", function(e) { 
    var id = $(e.target).attr("href").substr(1); 
    window.location.hash = id; 
}); 

// on load of the page: switch to the currently selected tab 
var hash = window.location.hash; 
$('#myTab a[href="' + hash + '"]').tab('show'); 

Answer 2

Это лучший один, что я пробовал:

$(document).ready(function() { 
    if (location.hash) { 
     $("a[href='" + location.hash + "']").tab("show"); 
    } 
    $(document.body).on("click", "a[data-toggle]", function(event) { 
     location.hash = this.getAttribute("href"); 
    }); 
}); 
$(window).on("popstate", function() { 
    var anchor = location.hash || $("a[data-toggle='tab']").first().attr("href"); 
    $("a[href='" + anchor + "']").tab("show"); 
}); 

Answer 3

Использование HTML5 Я приготовил этот:

Некоторые где на странице:

<h2 id="heading" data-activetab="@ViewBag.activetab">Some random text</h2> 

Сумка просмотра должна содержать только идентификатор страницы/элемента, например: «тестирование»

Я создал site.js и добавил сумы на странице:

/// <reference path="../jquery-2.1.0.js" /> 
$(document).ready(
    function() { 
    var setactive = $("#heading").data("activetab"); 
    var a = $('#' + setactive).addClass("active"); 
    } 
) 

Теперь все, что вам нужно сделать, это добавить свои идентификаторы в панели навигации. Например .:

<ul class="nav navbar-nav"> 
    <li **id="testing" **> 
    @Html.ActionLink("Lalala", "MyAction", "MyController") 
    </li> 
</ul> 

Все оклик атрибут данных :)

Answer 4

Основываясь на себя ответы, представленные Xavi Martínez и koppor я придумал решение, которое использует URL-адрес хэш или LocalStorage в зависимости от наличия последнего :

function rememberTabSelection(tabPaneSelector, useHash) { 
    var key = 'selectedTabFor' + tabPaneSelector; 
    if(get(key)) 
     $(tabPaneSelector).find('a[href=' + get(key) + ']').tab('show'); 

    $(tabPaneSelector).on("click", 'a[data-toggle]', function(event) { 
     set(key, this.getAttribute('href')); 
    }); 

    function get(key) { 
     return useHash ? location.hash: localStorage.getItem(key); 
    } 

    function set(key, value){ 
     if(useHash) 
      location.hash = value; 
     else 
      localStorage.setItem(key, value); 
    } 
} 

Использование:

$(document).ready(function() { 
    rememberTabSelection('#rowTab', !localStorage); 
    // Do Work... 
}); 

Он не справляется с задней кнопкой, как в случае с решением Xavi Martínez.

Answer 5

Мой код, он работает для меня, я использую localStorage HTML5

$('#tabHistory a').click(function(e) { 
    e.preventDefault(); 
    $(this).tab('show'); 
}); 
$("ul.nav-tabs#tabHistory > li > a").on("shown.bs.tab", function(e) { 
    var id = $(e.target).attr("href"); 
    localStorage.setItem('selectedTab', id) 
}); 
var selectedTab = localStorage.getItem('selectedTab'); 
$('#tabHistory a[href="' + selectedTab + '"]').tab('show'); 

Answer 6

Поскольку я еще не могу комментировать я скопировал ответ сверху, это действительно помогло мне. Но я изменил его для работы с файлами cookie вместо #id, поэтому я хотел поделиться изменениями.Это позволяет сохранить активную вкладку дольше, чем только одно обновление (например, множественное перенаправление) или когда идентификатор уже используется, и вы не хотите реализовывать метод разделения koppors.

<ul class="nav nav-tabs" id="myTab"> 
    <li class="active"><a href="#home">Home</a></li> 
    <li><a href="#profile">Profile</a></li> 
    <li><a href="#messages">Messages</a></li> 
    <li><a href="#settings">Settings</a></li> 
</ul> 

<div class="tab-content"> 
    <div class="tab-pane active" id="home">home</div> 
    <div class="tab-pane" id="profile">profile</div> 
    <div class="tab-pane" id="messages">messages</div> 
    <div class="tab-pane" id="settings">settings</div> 
</div> 

<script> 
$('#myTab a').click(function (e) { 
    e.preventDefault(); 
    $(this).tab('show'); 
}); 

// store the currently selected tab in the hash value 
$("ul.nav-tabs > li > a").on("shown.bs.tab", function (e) { 
    var id = $(e.target).attr("href").substr(1); 
    $.cookie('activeTab', id); 
}); 

    // on load of the page: switch to the currently selected tab 
    var hash = $.cookie('activeTab'); 
    if (hash != null) { 
     $('#myTab a[href="#' + hash + '"]').tab('show'); 
    } 
</script> 

Answer 7

Я пробовал код Xavi Martínez. Он работал, но не для IE7. Проблема заключается в том, что вкладки не относятся к какому-либо релевантному контенту.
Итак, я предпочитаю этот код для решения этой проблемы.

function pageLoad() { 
    $(document).ready(function() { 

    var tabCookieName = "ui-tabs-1"; //cookie name 
    var location = $.cookie(tabCookieName); //take tab's href 

    if (location) { 
     $('#Tabs a[href="' + location + '"]').tab('show'); //activate tab 
    } 

    $('#Tabs a').click(function(e) { 
     e.preventDefault() 
     $(this).tab('show') 
    }) 

    //when content is alredy shown - event activate 
    $('#Tabs a').on('shown.bs.tab', function(e) { 
     location = e.target.hash; // take current href 
     $.cookie(tabCookieName, location, { 
     path: '/' 
     }); //write href in cookie 
    }) 
    }); 
}; 

Answer 8

Код Xavi был полностью работоспособным. Но когда вы переходите на другую страницу, отправляя форму, то перенаправление на страницу с моими вкладками вообще не загружает сохраненную вкладку.

LocalStorage на помощь (немного изменил код Нгуиена):

$('a[data-toggle="tab"]').click(function (e) { 
    e.preventDefault(); 
    $(this).tab('show'); 
}); 

$('a[data-toggle="tab"]').on("shown.bs.tab", function (e) { 
    var id = $(e.target).attr("href"); 
    localStorage.setItem('selectedTab', id) 
}); 

var selectedTab = localStorage.getItem('selectedTab'); 
if (selectedTab != null) { 
    $('a[data-toggle="tab"][href="' + selectedTab + '"]').tab('show'); 
} 

Answer 9

Этот один использовать HTML5 localStorage для хранения активной вкладки

$('a[data-toggle="tab"]').on('show.bs.tab', function(e) { 
    localStorage.setItem('activeTab', $(e.target).attr('href')); 
}); 
var activeTab = localStorage.getItem('activeTab'); 
if (activeTab) { 
    $('#navtab-container a[href="' + activeTab + '"]').tab('show'); 
} 

исх: http://www.tutorialrepublic.com/faq/how-to-keep-the-current-tab-active-on-page-reload-in-bootstrap.php

Answer 10

В дополнение к Хави Мартинеса ответ, избегая прыжка при нажатии

Избежание Перейти

$(document).ready(function(){ 

    // show active tab 

    if(location.hash) { 

     $('a[href=' + location.hash + ']').tab('show'); 
    } 

    // set hash on click without jumb 

    $(document.body).on("click", "a[data-toggle]", function(e) { 

     e.preventDefault(); 

     if(history.pushState) { 

      history.pushState(null, null, this.getAttribute("href")); 
     } 
     else { 

      location.hash = this.getAttribute("href"); 
     } 

     $('a[href=' + location.hash + ']').tab('show'); 

     return false; 
    }); 
}); 

// set hash on popstate 

$(window).on('popstate', function() { 

    var anchor = location.hash || $("a[data-toggle=tab]").first().attr("href"); 

    $('a[href=' + anchor + ']').tab('show'); 
}); 

Вложенные вкладки реализации

с символом "_" как разделитель

$(document).ready(function(){ 

    // show active tab 

    if(location.hash) { 

     var tabs = location.hash.substring(1).split('_'); 

     $.each(tabs,function(n){ 

      $('a[href=#' + tabs[n] + ']').tab('show'); 
     });   

     $('a[href=' + location.hash + ']').tab('show'); 
    } 

    // set hash on click without jumb 

    $(document.body).on("click", "a[data-toggle]", function(e) { 

     e.preventDefault(); 

     if(history.pushState) { 

      history.pushState(null, null, this.getAttribute("href")); 
     } 
     else { 

      location.hash = this.getAttribute("href"); 
     } 

     var tabs = location.hash.substring(1).split('_'); 

     //console.log(tabs); 

     $.each(tabs,function(n){ 

      $('a[href=#' + tabs[n] + ']').tab('show'); 
     }); 

     $('a[href=' + location.hash + ']').tab('show'); 

     return false; 
    }); 
}); 

// set hash on popstate 

$(window).on('popstate', function() { 

    var anchor = location.hash || $("a[data-toggle=tab]").first().attr("href"); 

    var tabs = anchor.substring(1).split('_'); 

    $.each(tabs,function(n){ 

     $('a[href=#' + tabs[n] + ']').tab('show'); 
    }); 

    $('a[href=' + anchor + ']').tab('show'); 
}); 

Answer 11

Спасибо за обмен.

Читая все решения. Я придумал решение, которое использует URL хэш или LocalStorage в зависимости от наличия последнего с ниже код:

$(function(){ 
    $(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) { 
     localStorage.setItem('activeTab', $(e.target).attr('href')); 
    }) 

    var hash = window.location.hash; 
    var activeTab = localStorage.getItem('activeTab'); 

    if(hash){ 
      $('#project-tabs a[href="' + hash + '"]').tab('show'); 
    }else if (activeTab){ 
     $('#project-tabs a[href="' + activeTab + '"]').tab('show'); 
    } 
}); 

Answer 12

смесь между другими ответами:

• Нет прыгать по щелчку
• Сохранить на месте хэша
• Сохранить на LocalStorage (например, для отправки формы)

• Просто скопируйте & пасту;)

  if (location.hash) { 
      $('a[href=\'' + location.hash + '\']').tab('show'); 
  } 
  var activeTab = localStorage.getItem('activeTab'); 
  if (activeTab) { 
      $('a[href="' + activeTab + '"]').tab('show'); 
  } 
  
  $('body').on('click', 'a[data-toggle=\'tab\']', function (e) { 
      e.preventDefault() 
      var tab_name = this.getAttribute('href') 
      if (history.pushState) { 
      history.pushState(null, null, tab_name) 
      } 
      else { 
      location.hash = tab_name 
      } 
      localStorage.setItem('activeTab', tab_name) 
  
      $(this).tab('show'); 
      return false; 
  }); 
  $(window).on('popstate', function() { 
      var anchor = location.hash || 
      $('a[data-toggle=\'tab\']').first().attr('href'); 
      $('a[href=\'' + anchor + '\']').tab('show'); 
  }); 
  

Answer 13

Я попробовал это, и это работает: (Пожалуйста, замените this с таблетки или вкладки вы используете)

jQuery(document).ready(function() { 
     jQuery('a[data-toggle="pill"]').on('show.bs.tab', function(e) { 
      localStorage.setItem('activeTab', jQuery(e.target).attr('href')); 
     }); 

     // Here, save the index to which the tab corresponds. You can see it 
     // in the chrome dev tool. 
     var activeTab = localStorage.getItem('activeTab'); 

     // In the console you will be shown the tab where you made the last 
     // click and the save to "activeTab". I leave the console for you to 
     // see. And when you refresh the browser, the last one where you 
     // clicked will be active. 
     console.log(activeTab); 

     if (activeTab) { 
      jQuery('a[href="' + activeTab + '"]').tab('show'); 
     } 
    }); 

Я надеюсь, что это поможет кому-то.

Вот результат: ("class_name"). https://jsfiddle.net/neilbannet/ego1ncr5/5/

Answer 14

Мы использовали триггер Jquery для OnLoad есть скрипт, нажмите кнопку для нас

$ триггер ('нажмите');

Answer 15

Ну, это уже в 2018 году, но я думаю, что лучше поздно, чем никогда (например, название в телевизионной программе), lol. Здесь приведен код jQuery, который я создаю во время моей диссертации.

<script type="text/javascript"> 
$(document).ready(function(){ 
    $('a[data-toggle="tab"]').on('show.affectedDiv.tab', function(e) { 
     localStorage.setItem('activeTab', $(e.target).attr('href')); 
    }); 
    var activeTab = localStorage.getItem('activeTab'); 
    if(activeTab){ 
     $('#myTab a[href="' + activeTab + '"]').tab('show'); 
    } 
}); 
</script> 

и вот код для вкладок начальной загрузки:

<div class="affectedDiv"> 
    <ul class="nav nav-tabs" id="myTab"> 
     <li class="active"><a data-toggle="tab" href="#sectionA">Section A</a></li> 
     <li><a data-toggle="tab" href="#sectionB">Section B</a></li> 
     <li><a data-toggle="tab" href="#sectionC">Section C</a></li> 
    </ul> 
    <div class="tab-content"> 
     <div id="sectionA" class="tab-pane fade in active"> 
      <h3>Section A</h3> 
      <p>Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui. Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.</p> 
     </div> 
     <div id="sectionB" class="tab-pane fade"> 
      <h3>Section B</h3> 
      <p>Vestibulum nec erat eu nulla rhoncus fringilla ut non neque. Vivamus nibh urna, ornare id gravida ut, mollis a magna. Aliquam porttitor condimentum nisi, eu viverra ipsum porta ut. Nam hendrerit bibendum turpis, sed molestie mi fermentum id. Aenean volutpat velit sem. Sed consequat ante in rutrum convallis. Nunc facilisis leo at faucibus adipiscing.</p> 
     </div> 
     <div id="sectionC" class="tab-pane fade"> 
      <h3>Section C</h3> 
      <p>Vestibulum nec erat eu nulla rhoncus fringilla ut non neque. Vivamus nibh urna, ornare id gravida ut, mollis a magna. Aliquam porttitor condimentum nisi, eu viverra ipsum porta ut. Nam hendrerit bibendum turpis, sed molestie mi fermentum id. Aenean volutpat velit sem. Sed consequat ante in rutrum convallis. Nunc facilisis leo at faucibus adipiscing.</p> 
     </div> 
    </div> 
</div> 

Dont forget to call the bootstrap and other fundamental things

здесь быстрые коды для вас:

<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/1.12.4/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

Теперь давайте объясним:

The jQuery code in the above example simply gets the element's href attribute value when a new tab has been shown using the jQuery .attr() method and save it locally in the user's browser through HTML5 localStorage object. Later, when the user refresh the page it retrieves this data and activate the related tab via .tab('show') method.

Подняв несколько примеров? вот один из вас, ребята .. https://jsfiddle.net/Wineson123/brseabdr/

Желаю, чтобы мой ответ помог вам всем .. Cheerio! :)