Tab Bootstrap Twitter: Buka Tab Tertentu pada Reload Halaman atau Hyperlink

Saya sedang mengembangkan halaman web di mana saya menggunakan Bootstrap Framework Twitter dan Bootstrap Tabs JS mereka . Ini berfungsi dengan baik kecuali untuk beberapa masalah kecil, salah satunya adalah saya tidak tahu bagaimana masuk langsung ke tab tertentu dari tautan eksternal. Sebagai contoh:

<a href="facility.php#home">Home</a>
<a href="facility.php#notes">Notes</a>

harus pergi ke tab Beranda dan tab Catatan masing-masing ketika mengklik tautan dari halaman eksternal

Ini solusi saya untuk masalah ini, mungkin agak terlambat. Tapi itu mungkin bisa membantu orang lain:

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

// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
    window.location.hash = e.target.hash;
})

MEMPERBARUI

Untuk Bootstrap 3, ubah .on('shown', ...)ke.on('shown.bs.tab', ....)

Ini didasarkan pada jawaban @dubbe dan jawaban yang diterima SO ini . Ini menangani masalah dengan window.scrollTo(0,0)tidak berfungsi dengan benar. Masalahnya adalah ketika Anda mengganti tab hasl pada url yang ditampilkan, browser akan menggulir ke hash itu karena merupakan elemen pada halaman. Untuk menyiasatinya, tambahkan awalan sehingga hash tidak mereferensikan elemen halaman yang sebenarnya

// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "tab_";
if (hash) {
    $('.nav-tabs a[href="'+hash.replace(prefix,"")+'"]').tab('show');
} 

// Change hash for page-reload
$('.nav-tabs a').on('shown', function (e) {
    window.location.hash = e.target.hash.replace("#", "#" + prefix);
});

Contoh penggunaan

Jika Anda memiliki tab-pane dengan id = "mytab" Anda harus meletakkan tautan Anda seperti ini:

<a href="yoursite.com/#tab_mytab">Go to Specific Tab </a>

Anda dapat memicu clickacara di tautan tab yang sesuai:

$(document).ready(function(){

  if(window.location.hash != "") {
      $('a[href="' + window.location.hash + '"]').click()
  }

});

Ini adalah implementasi yang ditingkatkan dari solusi dubbe yang mencegah pengguliran.

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

// With HTML5 history API, we can easily prevent scrolling!
$('.nav-tabs a').on('shown.bs.tab', function (e) {
    if(history.pushState) {
        history.pushState(null, null, e.target.hash); 
    } else {
        window.location.hash = e.target.hash; //Polyfill for old browsers
    }
})

Sementara solusi JavaScript yang disediakan dapat berfungsi, saya menggunakan cara yang sedikit berbeda yang tidak memerlukan JavaScript tambahan, tetapi memang membutuhkan logika dalam pandangan Anda. Anda membuat tautan dengan parameter URL standar, seperti:

<a href = "http://link.to.yourpage?activeTab=home">My Link</a>

Kemudian Anda cukup mendeteksi nilai activeTab untuk menulis 'class = "active"' yang sesuai <li>

Kodesemu (implementasikan sesuai dalam bahasa Anda). Catatan Saya telah menetapkan tab 'beranda' sebagai aktif default jika tidak ada parameter yang diberikan dalam contoh ini.

$activetabhome = (params.activeTab is null or params.activeTab == 'home') ? 'class="active"' : '';
$activetabprofile = (params.activeTab == 'profile') ? 'class="active"' : '';

<li $activetabhome><a href="#home">Home</a></li>
<li $activetabprofile><a href="#profile">Profile</a></li>

Saya bukan penggemar if ... else; jadi saya mengambil pendekatan yang lebih sederhana.

$(document).ready(function(event) {
    $('ul.nav.nav-tabs a:first').tab('show'); // Select first tab
    $('ul.nav.nav-tabs a[href="'+ window.location.hash+ '"]').tab('show'); // Select tab by name if provided in location hash
    $('ul.nav.nav-tabs a[data-toggle="tab"]').on('shown', function (event) {    // Update the location hash to current tab
        window.location.hash= event.target.hash;
    })
});

1. Pilih tab default (biasanya yang pertama)
2. Beralih ke tab (jika elemen seperti itu memang ada; biarkan jQuery menanganinya); Tidak ada yang terjadi jika hash yang salah ditentukan
3. [Opsional] Perbarui hash jika tab lain dipilih secara manual

Tidak membahas pengguliran ke hash yang diminta; tetapi haruskah itu?

Untuk Bootstrap 3:

$('.nav-tabs a[href="#' + tabID + '"]').tab('show');

https://jsfiddle.net/DTcHh/6638/

Ini berfungsi di Bootstrap 3 dan meningkatkan 2 jawaban teratas dubbe dan flynfish dengan mengintegrasikan jawaban GarciaWebDev juga (yang memungkinkan parameter url setelah hash dan langsung dari penulis Bootstrap pada pelacak masalah github):

// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "tab_";

if (hash) {
    hash = hash.replace(prefix,'');
    var hashPieces = hash.split('?');
    activeTab = $('.nav-tabs a[href=' + hashPieces[0] + ']');
    activeTab && activeTab.tab('show');
} 

// Change hash for page-reload
$('.nav-tabs a').on('shown', function (e) {
    window.location.hash = e.target.hash.replace("#", "#" + prefix);
});

Kode ini memilih tab kanan tergantung pada hash # dan menambahkan # hash kanan ketika tab diklik. (ini menggunakan jquery)

Dalam Coffeescript:

$(document).ready ->
    if location.hash != ''
        $('a[href="'+location.hash+'"]').tab('show')

    $('a[data-toggle="tab"]').on 'shown', (e) ->
        location.hash = $(e.target).attr('href').substr(1)

atau di JS:

$(document).ready(function() {
    if (location.hash !== '') $('a[href="' + location.hash + '"]').tab('show');
    return $('a[data-toggle="tab"]').on('shown', function(e) {
      return location.hash = $(e.target).attr('href').substr(1);
    });
});

Membangun solusi Demircan Celebi; Saya ingin tab terbuka saat memodifikasi url dan buka tab tanpa harus memuat ulang halaman dari server.

<script type="text/javascript">
    $(function() {
        openTabHash(); // for the initial page load
        window.addEventListener("hashchange", openTabHash, false); // for later changes to url
    });


    function openTabHash()
    {
        console.log('openTabHash');
        // Javascript to enable link to tab
        var url = document.location.toString();
        if (url.match('#')) {
            $('.nav-tabs a[href="#'+url.split('#')[1]+'"]').tab('show') ;
        } 

        // With HTML5 history API, we can easily prevent scrolling!
        $('.nav-tabs a').on('shown.bs.tab', function (e) {
            if(history.pushState) {
                history.pushState(null, null, e.target.hash); 
            } else {
                window.location.hash = e.target.hash; //Polyfill for old browsers
            }
        })
    }
</script>

$(function(){
  var hash = window.location.hash;
  hash && $('ul.nav a[href="' + hash + '"]').tab('show');
});

Kode ini dari http://github.com/twitter/bootstrap/issues/2415#issuecomment-4450768 bekerja dengan baik untuk saya.

@flynfish + @Ztyx solusi yang saya gunakan untuk tab bersarang:

    handleTabLinks();

    function handleTabLinks() {
        if(window.location.hash == '') {
            window.location.hash = window.location.hash + '#_';
        }
        var hash = window.location.hash.split('#')[1];
        var prefix = '_';
        var hpieces = hash.split('/');
        for (var i=0;i<hpieces.length;i++) {
            var domelid = hpieces[i].replace(prefix,'');
            var domitem = $('a[href=#' + domelid + '][data-toggle=tab]');
            if (domitem.length > 0) {
                domitem.tab('show');
            }
        }
        $('a[data-toggle=tab]').on('shown', function (e) {
            if ($(this).hasClass('nested')) {
                var nested = window.location.hash.split('/');
                window.location.hash = nested[0] + '/' + e.target.hash.split('#')[1];
            } else {
                window.location.hash = e.target.hash.replace('#', '#' + prefix);
            }
        });
    }

anak-anak harus memiliki class = "nested"

Saya datang dengan solusi yang menggunakan hash url atau localStorage tergantung pada ketersediaan yang terakhir dengan kode di bawah ini:

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

Saya sarankan Anda menggunakan kode yang disediakan oleh penulis Bootstrap pada pelacak masalah mereka di GitHub :

var hash = location.hash
  , hashPieces = hash.split('?')
  , activeTab = $('[href=' + hashPieces[0] + ']');
activeTab && activeTab.tab('show');

Anda dapat menemukan di tautan ke masalah ini informasi lebih lanjut tentang mengapa mereka tidak memilih untuk mendukungnya.

Mencoba beberapa cara yang dibahas di atas dan berakhir dengan mengikuti solusi yang berfungsi, cukup salin dan tempel di editor Anda untuk mencoba. Untuk menguji cukup ubah hash ke inbox, outbox, buat url dan tekan enter.

<html>
    <head>
        <link type='text/css' rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css' />
        <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container body-content">
            <ul class="nav nav-tabs">
                <li class="active"><a data-toggle="tab" href="#inbox">Inbox</a></li>
                <li><a data-toggle="tab" href="#outbox">Outbox</a></li>
                <li><a data-toggle="tab" href="#compose">Compose</a></li>
            </ul>
            <div class="tab-content">
                <div id="inbox" class="tab-pane fade in active">
                    Inbox Content
                </div>
                <div id="outbox" class="tab-pane fade">
                    Outbox Content
                </div>
                <div id="compose" class="tab-pane fade">
                    Compose Content
                </div>
            </div>
        </div>
        <script>
            $(function () {
                var hash = window.location.hash;
                hash && $('ul.nav a[href="' + hash + '"]').tab('show');
            });
        </script>
    </body>
</html>

Semoga ini akan menghemat waktu Anda.

Inilah yang saya lakukan, sangat sederhana, dan asalkan tautan tab Anda memiliki ID yang terkait dengannya, Anda bisa mendapatkan atribut href dan meneruskannya ke fungsi yang menampilkan konten tab:

<script type="text/javascript">
        jQuery(document).ready(function() {
            var hash = document.location.hash;
            var prefix = "tab_";
            if (hash) {
                var tab = jQuery(hash.replace(prefix,"")).attr('href');
                jQuery('.nav-tabs a[href='+tab+']').tab('show');
            }
        });
        </script>

Kemudian di url Anda, Anda dapat menambahkan hash sebagai sesuatu seperti: # tab_tab1, bagian 'tab_' dihapus dari hash itu sendiri sehingga ID tautan tab aktual di nav-tabs (tabid1) ditempatkan setelah ini, jadi Anda url akan terlihat seperti: www.mydomain.com/index.php#tab_tabid1.

Ini berfungsi sempurna untuk saya dan berharap ini membantu orang lain :-)

Ini solusi saya untuk menangani tab bersarang. Saya baru saja menambahkan fungsi untuk memeriksa apakah tab aktif memiliki tab induk untuk diaktifkan. Ini fungsinya:

function activateParentTab(tab) {
    $('.tab-pane').each(function() {
        var cur_tab = $(this);
        if ( $(this).find('#' + tab).length > 0 ) {
            $('.nav-tabs a[href=#'+ cur_tab.attr('id') +']').tab('show');
            return false;
        }
    });
}

Dan bisa disebut seperti ini (Berdasarkan solusi @ flynfish):

var hash = document.location.hash;
var prefix = "";
if (hash) {
    $('.nav-tabs a[href='+hash.replace(prefix,"")+']').tab('show');
    activateParentTab(hash);
} 

// Change hash for page-reload
$('.nav-tabs a').on('shown', function (e) {
    window.location.hash = e.target.hash.replace("#", "#" + prefix);
});

Solusi ini berfungsi cukup baik untuk saya saat ini. Semoga ini bisa bermanfaat untuk orang lain;)

Saya harus memodifikasi beberapa bit agar ini berfungsi untuk saya. Saya menggunakan Bootstrap 3 dan jQuery 2

// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "!";
if (hash) {
    hash = hash.replace(prefix,'');
    var hashPieces = hash.split('?');
    activeTab = $('[role="tablist"] a[href=' + hashPieces[0] + ']');
    activeTab && activeTab.tab('show');
}

// Change hash for page-reload
$('[role="tablist"] a').on('shown.bs.tab', function (e) {
    window.location.hash = e.target.hash.replace("#", "#" + prefix);
});

Cukup masukkan kode ini di halaman Anda:

$(function(){
  var hash = window.location.hash;
  hash && $('ul.nav a[href="' + hash + '"]').tab('show');

  $('.nav-tabs a').click(function (e) {
    $(this).tab('show');
    var scrollmem = $('body').scrollTop();
    window.location.hash = this.hash;
    $('html,body').scrollTop(scrollmem);
  });
});

Saya baru saja mengalami masalah ini, tetapi perlu menangani beberapa level tab. Kode ini agak jelek (lihat komentar), tetapi melakukan tugasnya: https://gist.github.com/JensRantil/4721860 Semoga orang lain akan merasa berguna (dan merasa bebas untuk mengusulkan solusi yang lebih baik!).

Menggabungkan peices dari jawaban lain, berikut adalah solusi yang dapat membuka banyak level tab bersarang:

// opens all tabs down to the specified tab
var hash = location.hash.split('?')[0];
if(hash) {
  var $link = $('[href=' + hash + ']');
  var parents = $link.parents('.tab-pane').get();
  $(parents.reverse()).each(function() {
    $('[href=#' + this.id + ']').tab('show') ;
  });
  $link.tab('show');
}

Jika penting bagi siapa pun, kode berikut ini kecil dan berfungsi tanpa cacat, untuk mendapatkan nilai hash tunggal dari URL dan menunjukkan bahwa:

<script>
    window.onload = function () {
        let url = document.location.toString();
        let splitHash = url.split("#");
        document.getElementById(splitHash[1]).click();
    };
</script>

apa yang dilakukannya adalah mengambil id dan menjalankan event klik. Sederhana.

Saya membuat sth seperti ini untuk tautan dengan ajax #!#(mis / test.com #! # Test3) tetapi Anda dapat memodifikasinya apa pun yang Anda suka

$(document).ready(function() {

       let hash = document.location.hash;
       let prefix = "!#";

       //change hash url on page reload
       if (hash) {
         $('.nav-tabs a[href=\"'+hash.replace(prefix,"")+'\"]').tab('show');
       } 

       // change hash url on switch tab
       $('.nav-tabs a').on('shown.bs.tab', function (e) {
          window.location.hash = e.target.hash.replace("#", "#" + prefix);
       });
 });

Contoh dengan halaman sederhana di Github di sini

Saya tahu utas ini sangat lama, tetapi saya akan meninggalkan di sini implementasi saya sendiri:

$(function () {
  // some initialization code

  addTabBehavior()
})

// Initialize events and change tab on first page load.
function addTabBehavior() {
  $('.nav-tabs a').on('show.bs.tab', e => {
    window.location.hash = e.target.hash.replace('nav-', '')
  })

  $(window).on('popstate', e => {
    changeTab()
  })

  changeTab()
}

// Change the current tab and URL hash; if don't have any hash
// in URL, so activate the first tab and update the URL hash.
function changeTab() {
  const hash = getUrlHash()

  if (hash) {
    $(`.nav-tabs a[href="#nav-${hash}"]`).tab('show')
  } else {
    $('.nav-tabs a').first().tab('show')
  }
}

// Get the hash from URL. Ex: www.example.com/#tab1
function getUrlHash() {
  return window.location.hash.slice(1)
}

Perhatikan bahwa saya menggunakan nav-awalan kelas ke tautan nav.