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

120

Я пытаюсь сохранить выбранную вкладку активной при обновлении с помощью 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');
}
Любитель кода
источник
Причина, по которой он не работает, заключается в том, что он не сохраняет выбранную вкладку. Когда я сделал console.log("selectedTab::"+selectedTab);, я получил: selectedTab::undefined. Значит, примененная вами логика неверна
Темный рыцарь
Не могли бы вы посоветовать мне, что делать?
Code Lover
Я пытаюсь это исправить. Если я это сделаю, я отправлю вам ответ здесь
Темный рыцарь
Я ценю это .. спасибо за помощь ..
Code Lover
Думаю, сработает: jsbin.com/UNuYoHE/2/edit . Если он сообщит мне, я опубликую ответ в четкой форме. Вы также можете посмотреть тексты вкладок div. они не дают должного ответа, когда вы нажимаете на них. Например, если вы щелкнете по tab4, вы получите текст tab1.
Темный рыцарь

Ответы:

187

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

<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');
koppor
источник
В разделе сценария вы должны добавить e.preventDefault();$(this).tab('show');
точку с запятой
12
К сожалению, браузер переходит к содержимому вкладки, когда вы нажимаете на нее. Это поведение по умолчанию, когда вы устанавливаете значение window.location.hash. Альтернативой может быть использование push.state, но вам понадобится полифилл для IE <= 9. Для получения дополнительной информации и других альтернативных решений посетите stackoverflow.com/questions/3870057/…
Филипп Майкл
3
Есть ли способ предотвратить «фальшивую прокрутку» к рассматриваемому идентификатору, когда мы нажимаем на элемент?
Патрис Поликвин
1
Прокрутка происходит из-за идентификатора, назначенного страницам вкладок. Если вы используете семантические идентификаторы и искажаете хэш (т.е. добавляете префикс / суффикс), он не будет распознан как действительный идентификатор, и прокрутки не произойдет. Расширю ответ этим.
Alex
1
@koppor он работает, но когда я перехожу прямо на другую сохраненную вкладку (через ссылку), он быстро отображает домашнюю вкладку или первую вкладку примерно за 1 секунду, прежде чем перейдет на вкладку в ссылке .. Любая идея, чтобы предотвратить отображение первой вкладка, поскольку она не нужна?
mboy
135

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

$(document).ready(function() {
    if (location.hash) {
        $("a[href='" + location.hash + "']").tab("show");
    }
    $(document.body).on("click", "a[data-toggle='tab']", 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");
});
Хави Мартинес
источник
20
Это работает лучше, чем принятое решение (под лучшим я имею в виду: копирование и вставка работает: D)
Сирил Дюшон-Дорис
3
лучшее копирование и вставка когда-либо: P
Ghostff
1
Думаю, "a[data-toggle=tab]"было бы лучше изменить селектор на . Теперь, как написан селектор, он также изменяет URL-адрес браузера при нажатии на ссылку, например, для открытия модального окна.
leifdenby
5
Вы можете добавить строковую скобку к селектору, например 'a [href = "' + location.hash + '"]'. Наткнулся на синтаксическую ошибку.
asdacap 02
1
Используя это как есть противоречие с Bootstrap выпадающих (которые используют data-toggle="dropdown". И которые я случиться , чтобы на одной странице с вкладками в одном случае , как кто - то предложил здесь, просто заменить $(document.body).on("click", "a[data-toggle]", function(event) {с $(document.body).on("click", "a[data-toggle='tab']", function(event) {сделал трюк для меня.
Jiveman
44

Смесь других ответов:

  • Без прыжка при нажатии
  • Экономьте на хэше местоположения
  • Сэкономьте на 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');
    });
insign
источник
1
Жаль, что я сначала попробовал другие решения - это работает лучше всего!
tdc
2
Лучшее решение, которое я пробовал из многих разных. Переход к содержимому вкладки раздражал
kentor
4
Content jump все еще существует с этим ответом
shazyriver
2
Отличное решение: скопировать, вставить, пообедать. Ницца.
Гэри Стэнтон,
1
Лучшее решение на свете
удачливый
19

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

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');
}
apfz
источник
2
Это золото! Работает даже с модальными окнами! Отличный ответ.
Lech Osiński
2
Этот код великолепен и отлично работает, если вы хотите, чтобы вкладка оставалась выбранной, даже если пользователь покидает сайт (завершает сеанс) и возвращается позже. Чтобы выбор сохранялся только в течение текущего сеанса и возвращался на вкладку по умолчанию в следующем сеансе, замените два экземпляра «localStorage» на «sessionStorage».
Gary.Ray
Краткое, удобное решение для копирования и вставки, которое отлично работает с Bootstrap 4.
Служба поддержки CFP
Вау потрясающее решение!
Jilani A
1
[data-toggle="pill"]для таблеток
mxmissile
13

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

$('a[data-toggle="tab"]').on('shown.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 https://www.w3schools.com/bootstrap /bootstrap_ref_js_tab.asp

Аджит Р. Наир
источник
это хорошо, но недостатком является то, что вы не сможете делиться ссылками с активной вкладкой
lfender6445
это хорошо, преимущество в том, что это не создает проблемы, когда "window.location.hash" добавляет хеш-значение в параметр http-запроса в URL-адресе, вызывая столкновение и неверный параметр, читаемый другим HTTP-запросом, таким как разбиение на страницы и т. д.
Dung
4

Основываясь на ответах, предоставленных Хави Мартинесом и Коппором, я придумал решение, которое использует хеш 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...
});

Она не успевает за кнопкой возврата, как в случае с решением Хави Мартинеса .

Зиад
источник
4

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

$('#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');
Нгуен Фам
источник
4

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

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

Надеюсь, это кому-нибудь поможет.

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

Нил Баннет
источник
4

Что ж, это уже 2018 год, но я думаю, что лучше поздно, чем никогда (как заголовок в телепрограмме), лол. Вот код 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>


Не забывайте вызывать бутстрап и другие фундаментальные вещи 

вот вам быстрые коды:

<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>


Теперь приступим к объяснению:

Код jQuery в приведенном выше примере просто получает значение атрибута href элемента при отображении новой вкладки с помощью метода jQuery .attr () и сохраняет ее локально в браузере пользователя с помощью объекта HTML5 localStorage. Позже, когда пользователь обновляет страницу, он извлекает эти данные и активирует соответствующую вкладку с помощью метода .tab ('show').

Ищете примеры? вот вам, ребята .. https://jsfiddle.net/Wineson123/brseabdr/

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

Г-н Уинсон
источник
2

Поскольку я пока не могу комментировать, я скопировал ответ сверху, это мне очень помогло. Но я изменил его для работы с куки-файлами вместо #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>
Джоэри Ландман
источник
Спасибо за обновление. На самом деле я искал такое разрешение, но, чем хотел, получил только ответ @koppor как рабочий. Фактически, это один из отличных способов, если мы хотим использовать функцию возврата. Спасибо за обновление
Code Lover
2

Я попробовал код, предложенный Хави Мартинесом . Это сработало, но не для 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
    })
  });
};
Виталий Исаенко
источник
это хорошо, но недостатком является то, что вы не сможете делиться ссылками с активной вкладкой
lfender6445
1

Спасибо, что поделился.

Прочитав все решения. Я придумал решение, которое использует хэш 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');
    }
});
Vaibhav
источник
1

Для Bootstrap v4.3.1. Попробуйте ниже:

$(document).ready(function() {
    var pathname = window.location.pathname; //get the path of current page
    $('.navbar-nav > li > a[href="'+pathname+'"]').parent().addClass('active');
})
gkc123
источник
0

Используя 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>

Все приветствуют атрибут данных :)

Теодор Александр Хканссон Хей
источник
0

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

Избегание прыжка

$(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');
});
RafaSashi
источник
0

Мы использовали триггер jquery для загрузки, чтобы скрипт нажал кнопку для нас

$ ( "Class_name.") Триггер (до щелчка).

Дэн Кайзер
источник
0

Горе, есть так много способов сделать это. Я придумал это коротко и просто. Надеюсь, это поможет другим.

  var url = document.location.toString();
  if (url.match('#')) {
    $('.nav-tabs a[href="#' + url.split('#')[1] + '"]').tab('show');
  } 

  $('.nav-tabs a').on('shown.bs.tab', function (e) {
    window.location.hash = e.target.hash;
    if(e.target.hash == "#activity"){
      $('.nano').nanoScroller();
    }
  })
user752746
источник
0

Существует решение после перезагрузки страницы и сохранения выбранной ожидаемой вкладки.

Предположим, после сохранения данных перенаправленный URL-адрес: my_url # tab_2

Теперь с помощью следующего скрипта ваша ожидаемая вкладка останется выбранной.

$(document).ready(function(){
    var url = document.location.toString();
    if (url.match('#')) {
        $('.nav-tabs a[href="#' + url.split('#')[1] + '"]').tab('show');
        $('.nav-tabs a').removeClass('active');
    }
});
Хасиб Камаль
источник
Активный класс автоматически присваивается тегу привязки, поэтому он удаляется с помощью $ ('. Nav-tabs a'). RemoveClass ('active'); этот сценарий.
Хасиб Камаль