Bagaimana caranya agar tab saat ini tetap aktif dengan twitter bootstrap setelah halaman dimuat ulang?

87

Saat ini saya menggunakan tab dengan Twitter Bootstrap dan ingin memilih tab yang sama setelah pengguna memposting data dan halaman dimuat ulang.

Bagaimana ini dilakukan?

Panggilan saya saat ini untuk mengintip tab terlihat seperti ini:

<script type="text/javascript">

$(document).ready(function() {

    $('#profileTabs a:first').tab('show');
});
</script>

Tab saya:

<ul id="profileTabs" class="nav nav-tabs">
    <li class="active"><a href="#profile" data-toggle="tab">Profile</a></li>
    <li><a href="#about" data-toggle="tab">About Me</a></li>
    <li><a href="#match" data-toggle="tab">My Match</a></li>
</ul>
javascript jquery twitter-bootstrap Paul
sumber
1
Ini tampaknya menjadi pertanyaan duplikat untuk stackoverflow.com/questions/18999501/…
koppor
terkait dengan stackoverflow.com/questions/7862233/…
Tim Abell

Jawaban:

138

Anda harus menggunakan Penyimpanan lokal atau cookie untuk mengelolanya. Berikut adalah solusi cepat dan kotor yang dapat ditingkatkan secara signifikan, tetapi dapat memberi Anda titik awal:

$(function() { 
    // for bootstrap 3 use 'shown.bs.tab', for bootstrap 2 use '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('lastTab', $(this).attr('href'));
    });

    // go to the latest tab, if it exists:
    var lastTab = localStorage.getItem('lastTab');
    if (lastTab) {
        $('[href="' + lastTab + '"]').tab('show');
    }
});
dgabriel.dll
sumber
Bagus sekali, solusi Anda mungkin ditambahkan di joomla 30 core, joomlacode.org/gf/project/joomla/tracker/…
Benn
12
lebih baik gunakan $(this).attr('href')daripada $(e.target).attr('id')memberi Anda hash tanpa url lengkap. Anda juga harus menerapkan .tab()pada tag dengan data-toggle="tab"sebagai ganti $('#'+lastTab). Lihat juga: stackoverflow.com/questions/16808205/…
Bass Jobsen
3
Sepertinya metode sedikit berubah di Bootstrap 3. shownsepertinya tidak lagi berfungsi, harus mengubahnya menjadi shown.bs.tab. Catatan: Saya memahami javascript dkk tentang serta saya memahami ekonomi ... jadi seseorang yang tahu apa yang terjadi jangan ragu untuk mengoreksi saya.
Chaz
10
Dimodifikasi untuk bekerja dengan beberapa kontrol tab (dan Bootstrap 3): gist.github.com/brendanmckenzie/8f8008d3d51c07b2700f
Brendan
1
Ini akan membuka tab pertama dan kembali ke tab saat ini setelah penyegaran
Raviteja
23

Membuat ini bekerja menggunakan cookie dan juga menghapus kelas 'aktif' dari tab dan panel tab lain ... dan menambahkan kelas 'aktif' ke tab dan panel tab saat ini.

Saya yakin ada cara yang lebih baik untuk melakukan ini, tetapi ini tampaknya berhasil dalam kasus ini.

Membutuhkan plugin cookie jQuery.

$(function() { 
  $('a[data-toggle="tab"]').on('shown', function(e){
    //save the latest tab using a cookie:
    $.cookie('last_tab', $(e.target).attr('href'));
  });

  //activate latest tab, if it exists:
  var lastTab = $.cookie('last_tab');
  if (lastTab) {
      $('ul.nav-tabs').children().removeClass('active');
      $('a[href='+ lastTab +']').parents('li:first').addClass('active');
      $('div.tab-content').children().removeClass('active');
      $(lastTab).addClass('active');
  }
});
ricsrock
sumber
Saya tidak bisa mendapatkan solusi Penyimpanan lokal untuk bekerja meskipun tampaknya logis. Solusi ini di luar kotak dan plugin $ .cookie SANGAT berguna untuk dimiliki.
Michael J. Calkins
terapkan .tab () pada tag dengan data-toggle = "tab" alih-alih menghapus dan menambahkan kelas, lihat juga: stackoverflow.com/questions/16808205/…
Bass Jobsen
Untuk tata letak saya, karena saya menggunakan 'fade in active' untuk div, perlu mengubah dua baris terakhir untuk menambah atau menghapus 'in active'.
Obromios
18

Semua jawaban lainnya benar. Jawaban ini akan memperhitungkan fakta bahwa seseorang mungkin memiliki beberapa ul.nav.nav-pillsatau ul.nav.nav-tabspada halaman yang sama. Dalam hal ini, jawaban sebelumnya akan gagal.

Masih menggunakan localStoragetapi dengan stringified JSONsebagai nilainya. Ini kodenya:

$(function() {
  var json, tabsState;
  $('a[data-toggle="pill"], a[data-toggle="tab"]').on('shown', function(e) {
    var href, json, parentId, tabsState;

    tabsState = localStorage.getItem("tabs-state");
    json = JSON.parse(tabsState || "{}");
    parentId = $(e.target).parents("ul.nav.nav-pills, ul.nav.nav-tabs").attr("id");
    href = $(e.target).attr('href');
    json[parentId] = href;

    return localStorage.setItem("tabs-state", JSON.stringify(json));
  });

  tabsState = localStorage.getItem("tabs-state");
  json = JSON.parse(tabsState || "{}");

  $.each(json, function(containerId, href) {
    return $("#" + containerId + " a[href=" + href + "]").tab('show');
  });

  $("ul.nav.nav-pills, ul.nav.nav-tabs").each(function() {
    var $this = $(this);
    if (!json[$this.attr("id")]) {
      return $this.find("a[data-toggle=tab]:first, a[data-toggle=pill]:first").tab("show");
    }
  });
});

Bit ini dapat digunakan di seluruh aplikasi di semua halaman dan akan berfungsi untuk tab dan pil. Selain itu, pastikan tab atau pil tidak aktif secara default , jika tidak, Anda akan melihat efek flicker saat halaman dimuat.

Penting : Pastikan orang tua ulmemiliki id. Terima kasih Alain

Oktav
sumber
2
Juga, untuk BS3, ganti acara 'ditampilkan' dengan 'ditampilkan.bs.tab'
Alain
18

Untuk opsi terbaik, gunakan teknik ini:

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

  //go to the latest tab, if it exists:
  var lastTab = localStorage.getItem('lastTab');

  if (lastTab) {
    $('a[href="'+lastTab+'"]').click();
  }
});
Vaimeo
sumber
12

Saya lebih suka menyimpan tab yang dipilih di nilai hash jendela. Ini juga memungkinkan pengiriman link ke kolega, yang kemudian melihat halaman "yang sama". Triknya adalah mengubah hash lokasi saat tab lain dipilih. Jika Anda sudah menggunakan # di halaman Anda, mungkin tag hash harus dipisah. Di aplikasi saya, saya menggunakan ":" sebagai pemisah nilai hash.

<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);
        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');
</script>
koppor
sumber
Terima kasih atas jawaban ini. Ini berfungsi dengan baik untuk saya dan saya tidak ingin berurusan dengan cookie hanya untuk masalah ini jadi ini bagus.
nico008
@koppor, ini tidak bekerja ada acara postback. saya menambahkan tombol tautan <asp:LinkButton CssClass="form-search" ID="LinkButtonSearch" runat="server">Search</asp:LinkButton> , setelah mengklik tombol, itu adalah tab default yang menjadi aktif bukan tab saat ini. bagaimana saya bisa memperbaikinya ??
Djama
6

Untuk mencegah halaman berkedip pada tab pertama dan kemudian tab yang disimpan oleh cookie (ini terjadi saat Anda menentukan kelas "aktif" secara default di TAB pertama)

Hapus kelas "aktif" dari tab dan panel seperti: 

<ul class="nav nav-tabs">
<div id="p1" class="tab-pane">

Letakkan skrip di bawah ini untuk mengatur tab pertama seperti default (Membutuhkan plugin cookie jQuery)

    $(function() { 
        $('a[data-toggle="tab"]').on('shown', function(e){
            //save the latest tab using a cookie:
            $.cookie('last_tab', $(e.target).attr('href'));
        });
        //activate latest tab, if it exists:
        var lastTab = $.cookie('last_tab');
        if (lastTab) {
            $('a[href=' + lastTab + ']').tab('show');
        }
        else
        {
            // Set the first tab if cookie do not exist
            $('a[data-toggle="tab"]:first').tab('show');
        }
    });
Jeferson Tenorio
sumber
3

Ingin efek memudar? Versi terbaru dari kode @ Oktav:

  1. Untuk Bootstrap 3
  2. Siapkan kelas pada div li dan tab untuk mengaktifkan fading agar berfungsi dengan baik. Perhatikan bahwa semua div konten membutuhkanclass="tab-pane fade"

Kode: 

// See http://stackoverflow.com/a/16984739/64904
// Updated by Larry to setup for fading
$(function() {
  var json, tabsState;
  $('a[data-toggle="pill"], a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
    var href, json, parentId, tabsState;
    tabsState = localStorage.getItem("tabs-state");
    json = JSON.parse(tabsState || "{}");
    parentId = $(e.target).parents("ul.nav.nav-pills, ul.nav.nav-tabs").attr("id");
    href = $(e.target).attr('href');
    json[parentId] = href;
    return localStorage.setItem("tabs-state", JSON.stringify(json));
  });
  tabsState = localStorage.getItem("tabs-state");
  json = JSON.parse(tabsState || "{}");
  $.each(json, function(containerId, href) {
    var a_el = $("#" + containerId + " a[href=" + href + "]");
    $(a_el).parent().addClass("active");
    $(href).addClass("active in");
    return $(a_el).tab('show');
  });
  $("ul.nav.nav-pills, ul.nav.nav-tabs").each(function() {
    var $this = $(this);
    if (!json[$this.attr("id")]) {
      var a_el = $this.find("a[data-toggle=tab]:first, a[data-toggle=pill]:first"),
          href = $(a_el).attr('href');
      $(a_el).parent().addClass("active");
      $(href).addClass("active in");
      return $(a_el).tab("show");
    }
  });
});
Larry K
sumber
3

Saya memiliki tab di beberapa halaman dan localStorage menyimpan lastTab dari halaman sebelumnya juga, jadi untuk halaman berikutnya, karena halaman sebelumnya memiliki tab terakhir dalam penyimpanan, tidak ada tab yang cocok di sini, jadi tidak ada yang ditampilkan. Saya memodifikasinya dengan cara ini.

$(document).ready(function(){
    //console.log($('a[data-toggle="tab"]:first').tab('show'))
    $('a[data-toggle="tab"]').on('shown.bs.tab', function () {
        //save the latest tab; use cookies if you like 'em better:
        localStorage.setItem('lastTab', $(this).attr('href'));
    });

    //go to the latest tab, if it exists:
    var lastTab = localStorage.getItem('lastTab');
    if ($('a[href=' + lastTab + ']').length > 0) {
        $('a[href=' + lastTab + ']').tab('show');
    }
    else
    {
        // Set the first tab if cookie do not exist
        $('a[data-toggle="tab"]:first').tab('show');
    }
})

edit: Saya perhatikan bahwa saya harus memiliki lastTabnama variabel yang berbeda untuk halaman yang berbeda, jika tidak, mereka akan selalu menimpa satu sama lain. misalnya lastTab_klanten, lastTab_bestellingendll. untuk dua halaman berbeda klantendan bestellingenkeduanya menampilkan data dalam tab.

$(document).ready(function(){
    //console.log($('a[data-toggle="tab"]:first').tab('show'))
    $('a[data-toggle="tab"]').on('shown.bs.tab', function () {
        //save the latest tab; use cookies if you like 'em better:
        localStorage.setItem('lastTab_klanten', $(this).attr('href'));
    });

    //go to the latest tab, if it exists:
    var lastTab_klanten = localStorage.getItem('lastTab_klanten');
    if (lastTab_klanten) {
        $('a[href=' + lastTab_klanten + ']').tab('show');
    }
    else
    {
        // Set the first tab if cookie do not exist
        $('a[data-toggle="tab"]:first').tab('show');
    }
})
GoharSahi
sumber
3

Saya membuatnya berfungsi dengan solusi yang mirip dengan @dgabriel, dalam hal ini, tautannya <a>tidak perlu id, ini mengidentifikasi tab saat ini berdasarkan posisinya.

$(function() { 
  $('a[data-toggle="tab"]').on('shown', function (e) {
    var indexTab = $('a[data-toggle="tab"]').index($(this)); // this: current tab anchor
    localStorage.setItem('lastVisitedTabIndex', indexTab);
  });

  //go to the latest tab, if it exists:
  var lastIndexTab  = localStorage.getItem('lastVisitedTabIndex');
  if (lastIndexTab) {
      $('a[data-toggle="tab"]:eq(' + lastIndexTab + ')').tab('show');
  }
});
Jaider
sumber
Saya pikir kode Anda salah, getItem harus ditampilkan sebelum ditampilkan, juga memecahkan masalah mendeklarasikan indexTab dua kali.
John Magnolia
@JohnMagnolia Saya menyebutkan indexTabdua kali tetapi berbeda. indeks. Jadi saya akan memanggil yang ke-2 lastIndexTab. Mengenai shown, itu adalah acara, jadi tidak akan terpicu sampai Anda membuka tab, jadi tidak masalah jika sebelumnya getItem.
Jaider
1

Saya menyarankan perubahan berikut

  1. Menggunakan plugin seperti amplify.store yang menyediakan crossbrowser / crossplatform localStorage API dengan builtin fallbacks.

  2. Targetkan tab yang perlu disimpan $('#div a[data-toggle="tab"]')sedemikian rupa untuk memperluas fungsi ini ke beberapa penampung tab yang ada di halaman yang sama.

  3. Gunakan pengenal unik (url ??)untuk menyimpan dan memulihkan tab yang terakhir digunakan di beberapa halaman.

$(function() { 
  $('#div a[data-toggle="tab"]').on('shown', function (e) {
    amplify.store(window.location.hostname+'last_used_tab', $(this).attr('href'));
  });

  var lastTab = amplify.store(window.location.hostname+'last_used_tab');
  if (lastTab) {
    $("#div a[href="+ lastTab +"]").tab('show');
  }
});
Sandeep
sumber
1

Solusi sederhana tanpa penyimpanan lokal:

$(".nav-tabs a").on("click", function() {
    location.hash = $(this).attr("href");
});
Francesco Borzi
sumber
0

Pendekatan sisi server. Pastikan semua elemen html memiliki class = "" jika tidak ditentukan atau Anda harus menangani null.

    private void ActiveTab(HtmlGenericControl activeContent, HtmlGenericControl activeTabStrip)
    {
        if (activeContent != null && activeTabStrip != null)
        {
            // Remove active from content
            Content1.Attributes["class"] = Content1.Attributes["class"].Replace("active", "");
            Content2.Attributes["class"] = Content2.Attributes["class"].Replace("active", "");
            Content3.Attributes["class"] = Content3.Attributes["class"].Replace("active", "");

            // Remove active from tab strip
            tabStrip1.Attributes["class"] = tabStrip1.Attributes["class"].Replace("active", "");
            tabStrip2.Attributes["class"] = tabStrip2.Attributes["class"].Replace("active", "");
            tabStrip3.Attributes["class"] = tabStrip3.Attributes["class"].Replace("active", "");

            // Set only active
            activeContent.Attributes["class"] = activeContent.Attributes["class"] + " active";
            activeTabStrip.Attributes["class"] = activeTabStrip.Attributes["class"] + " active";
        }
    }
Michael Goldshmidt
sumber
0

Jika Anda ingin menampilkan tab pertama saat pertama kali masuk ke halaman, gunakan kode ini:

    <script type="text/javascript">
        function invokeMeMaster() {
        var chkPostBack = '<%= Page.IsPostBack ? "true" : "false" %>';
            if (chkPostBack == 'false') {
                $(function () {
                    // for bootstrap 3 use 'shown.bs.tab', for bootstrap 2 use '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('lastTab', $(this).attr('href'));
                    });

                });
            }
            else {
                $(function () {

                    // for bootstrap 3 use 'shown.bs.tab', for bootstrap 2 use '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('lastTab', $(this).attr('href'));
                    });

                    // go to the latest tab, if it exists:
                    var lastTab = localStorage.getItem('lastTab');
                    if (lastTab) {
                        $('[href="' + lastTab + '"]').tab('show');
                    }

                });

            }
        }
        window.onload = function() { invokeMeMaster(); };

    </script>
Luaskan cuplikan

ruben
sumber
0

Berikut adalah cuplikan yang saya buat yang berfungsi dengan Bootstrap 3 dan jQuery dan dengan URL berbeda yang berisi tab berbeda . Itu tidak mendukung banyak tab per halaman tetapi itu harus menjadi modifikasi yang mudah jika Anda membutuhkan fitur itu.

/**
 * Handles 'Bootstrap' package.
 *
 * @namespace bootstrap_
 */

/**
 * @var {String}
 */
var bootstrap_uri_to_tab_key = 'bootstrap_uri_to_tab';

/**
 * @return {String}
 */
function bootstrap_get_uri()
{
    return window.location.href;
}

/**
 * @return {Object}
 */
function bootstrap_load_tab_data()
{
    var uriToTab = localStorage.getItem(bootstrap_uri_to_tab_key);
    if (uriToTab) {
    try {
        uriToTab = JSON.parse(uriToTab);
        if (typeof uriToTab != 'object') {
        uriToTab = {};
        }
    } catch (err) {
        uriToTab = {};
    }
    } else {
    uriToTab = {};
    }
    return uriToTab;
}

/**
 * @param {Object} data
 */
function bootstrap_save_tab_data(data)
{
    localStorage.setItem(bootstrap_uri_to_tab_key, JSON.stringify(data));
}

/**
 * @param {String} href
 */
function bootstrap_save_tab(href)
{
    var uri = bootstrap_get_uri();
    var uriToTab = bootstrap_load_tab_data();
    uriToTab[uri] = href;
    bootstrap_save_tab_data(uriToTab);
}

/**
 *
 */
function bootstrap_restore_tab()
{
    var uri = bootstrap_get_uri();
    var uriToTab = bootstrap_load_tab_data();
    if (uriToTab.hasOwnProperty(uri) &&
    $('[href="' + uriToTab[uri] + '"]').length) {
    } else {
    uriToTab[uri] = $('a[data-toggle="tab"]:first').attr('href');
    }
    if (uriToTab[uri]) {
        $('[href="' + uriToTab[uri] + '"]').tab('show');
    }
}

$(document).ready(function() {

    if ($('.nav-tabs').length) {

    // for bootstrap 3 use 'shown.bs.tab', for bootstrap 2 use 'shown' in the next line
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        bootstrap_save_tab($(this).attr('href'));
    });
    bootstrap_restore_tab();

    }

});
cjohansson.dll
sumber
0

$ (dokumen) .ready (function () {

        if (JSON.parse(localStorage.getItem('currentClass')) == "active")
        {
            jQuery('#supporttbl').addClass('active')
            $('.sub-menu').css({ "display": "block" });
        }

        $("#supporttbl").click(function () { 
            var currentClass;
            if ($(this).attr('class')== "active") { 

                currentClass = $(this).attr('class');

                localStorage.setItem('currentClass', JSON.stringify(currentClass));
                console.log(JSON.parse(localStorage.getItem('currentClass')));

                jQuery('#supporttbl').addClass('active')
                $('.sub-menu').css({ "display": "block" });

            } else {

                currentClass = "Null"; 

                localStorage.setItem('currentClass', JSON.stringify(currentClass));
                console.log(JSON.parse(localStorage.getItem('currentClass')));

                jQuery('#supporttbl').removeClass('active')
                $('.sub-menu').css({ "display": "none" });

            }  
        });

});

dinesh patidar
sumber
0

Jika Anda memiliki lebih dari satu tab di halaman, Anda dapat menggunakan kode berikut

<script type="text/javascript">
$(document).ready(function(){
    $('#profileTabs').on('show.bs.tab', function(e) {
        localStorage.setItem('profileactiveTab', $(e.target).attr('href'));
    });
    var profileactiveTab = localStorage.getItem('profileactiveTab');
    if(profileactiveTab){
        $('#profileTabs a[href="' + profileactiveTab + '"]').tab('show');        
    }
    $('#charts-tab').on('show.bs.tab', function(e) {
        localStorage.setItem('chartsactiveTab', $(e.target).attr('href'));
    });
    var chartsactiveTab = localStorage.getItem('chartsactiveTab');
    if(chartsactiveTab){
        $('#charts-tab a[href="' + chartsactiveTab + '"]').tab('show');        
    }     
});
</script>
Mohamed Sami
sumber
0

Ini akan menyegarkan tab tetapi hanya setelah semua yang ada di pengontrol dimuat.

// >= angular 1.6 angular.element(function () {
angular.element(document).ready(function () {
    //Here your view content is fully loaded !!
    $('li[href="' + location.hash + '"] a').tab('show');
});
PHPGuru
sumber
0

Saya menggunakan ini dengan MVC:

  • Ada bidang integer SelectedTab dalam model untuk mengirim nilai ke metode POST

Bagian JavaScript:

<script type="text/javascript">
    $(document).ready(function () {
       var index = $("input#SelectedTab").val();
       $("#tabstrip > ul li:eq(" + index + ")").addClass("k-state-active");

       $("#tabstrip").kendoTabStrip();
    });
    function setTab(index) {
      $("input#SelectedTab").val(index)
    }
</script>

Bagian HTML:

@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
@Html.HiddenFor(model => model.SelectedTab)
<div id="tabstrip">
    <ul>
        <li onclick="setTab(0)">Content 0</li>
        <li onclick="setTab(1)">Content 1</li>
        <li onclick="setTab(2)">Content 2</li>
        <li onclick="setTab(3)">Content 3</li>
        <li onclick="setTab(4)">Content 4</li>
    </ul>
    <div>

    </div>
    <div>

    </div>
    <div>

    </div>
    <div>

    </div>
    <div>

    </div>
</div>
<div class="content">
    <button type="submit" name="save" class="btn bg-blue">Save</button>
</div>
}
Carlos Toledo
sumber