Twitter Bootstrap Sekmeleri: Sayfa Yeniden Yükleme veya Köprüdeki Özel Sekmeye Git

Twitter'ın Bootstrap Framework ve Bootstrap Tabs JS'lerini kullandığım bir web sayfası geliştiriyorum . Birkaç küçük sorun dışında harika çalışıyor, bunlardan biri doğrudan harici bir bağlantıdan belirli bir sekmeye nasıl gidileceğini bilmiyorum. Örneğin:

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

harici bir sayfadaki bağlantılara tıklandığında sırasıyla Giriş sekmesine ve Notlar sekmesine gitmelidir

İşte benim sorunun çözümü, belki biraz geç. Ama belki başkalarına yardımcı olabilir:

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

GÜNCELLEME

Bootstrap 3 için, değiştirmek .on('shown', ...)için.on('shown.bs.tab', ....)

Bu @dubbe cevabı ve bu SO kabul cevabını temel alır . Düzgün window.scrollTo(0,0)çalışmayan sorunu ele alır . Sorun, gösterilen sekmedeki url karmasını değiştirdiğinizde, tarayıcının sayfadaki bir öğesi olduğundan bu karmaya kaydırmasıdır. Bu sorunu aşmak için, karma gerçek bir sayfa öğesine referans vermeyecek şekilde bir önek ekleyin

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

Kullanım örneği

İd = "mytab" içeren sekme bölmeniz varsa bağlantınızı şu şekilde eklemeniz gerekir:

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

clickilgili sekme bağlantısında bir etkinliği tetikleyebilirsiniz :

$(document).ready(function(){

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

});

Bu, dubbe'nin kaydırmayı önleyen çözümünün geliştirilmiş bir uygulamasıdır.

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

Sağlanan JavaScript çözümü işe yarayabilirken, ek JavaScript gerektirmeyen, ancak görünümünüzde mantık gerektiren biraz farklı bir yol izledim. Aşağıdaki gibi standart bir URL parametresiyle bir bağlantı oluşturursunuz:

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

Daha sonra uygun sınıfta 'class = "active" yazmak için activeTab'ın değerini tespit edersiniz. <li>

Sözde kod (kendi dilinize göre uygulayın). Not Bu örnekte parametre belirtilmemişse, 'ana sayfa' sekmesini varsayılan etkin olarak ayarladım.

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

Eğer ben ... büyük bir hayranı değilim; bu yüzden daha basit bir yaklaşım izledim.

$(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. Varsayılan bir sekme seçin (genellikle ilk sekmeyi)
2. Sekmeye geçin (böyle bir eleman gerçekten varsa; jQuery tarafından işlensin); Yanlış bir karma belirtilirse hiçbir şey olmaz
3. [İsteğe bağlı] Manuel olarak başka bir sekme seçilirse karma değerini güncelleyin

İstenen karmaya kaydırmayı ele almıyor; ancak gerektiği o?

Bootstrap 3 için:

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

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

Bu Bootstrap 3'te çalışır ve GarciaWebDev'in cevabını da entegre ederek dubbe ve flynfish'in 2 üst cevabını iyileştirir (karmadan sonra url parametrelerine izin verir ve doğrudan github sorun izleyicisindeki Bootstrap yazarlarından):

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

Bu kod, #hash öğesine bağlı olarak sağ sekmeyi seçer ve bir sekme tıklatıldığında sağ #hash öğesini ekler. (bu jquery kullanır)

Coffeescript'te:

$(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)

veya JS'de:

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

Demircan Çelebi'nin çözümüne dayanarak; Sayfayı sunucudan yeniden yüklemek zorunda kalmadan URL ve açık sekmeyi değiştirirken sekmenin açılmasını istedim.

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

Http://github.com/twitter/bootstrap/issues/2415#issuecomment-4450768 adresindeki bu kod benim için mükemmel çalıştı.

Yuvalanmış sekmeler için kullandığım @flynfish + @Ztyx çözümü:

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

çocuk sınıfı = "iç içe" olmalıdır

Aşağıdaki kod ile ikincisinin kullanılabilirliğine bağlı olarak url karma veya localStorage kullanan bir çözüm geldi:

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

GitHub'daki sayı izleyicilerinde Bootstrap yazarları tarafından sağlanan kodu kullanmanızı öneririm :

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

Sorunun bağlantısını, bunu neden desteklemeyi seçmedikleri hakkında daha fazla bilgi bulabilirsiniz.

Yukarıda tartışılan birkaç yol denendi ve aşağıdaki çalışma çözümü ile sonuçlandı, sadece denemek için editörünüze kopyalayıp yapıştırın. Yalnızca karma değerini gelen kutusuna, giden kutusuna değiştirin, url'de oluşturun ve enter tuşuna basın.

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

Umarım bu zaman kazanır.

İşte yaptığım, gerçekten basit ve sekme bağlantılarınız onlarla ilişkili bir kimliğe sahip olması koşuluyla, href özniteliğini alabilir ve sekme içeriğini gösteren işleve iletebilirsiniz:

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

Daha sonra URL'nizde karmayı şöyle ekleyebilirsiniz: # tab_tab1, 'tab_' kısmı karmadan çıkarılır, böylece gezinme sekmelerinde (tabid1) gerçek sekme bağlantısının kimliği bundan sonra yerleştirilir, böylece url şuna benzer: www.alanadim.com/dizin.php#tab_tabid1.

Bu benim için mükemmel çalışıyor ve umarım başka birine yardımcı olur :-)

Yuvalanmış sekmeleri işlemek için bu benim çözümüm. Etkin sekmenin etkinleştirilecek bir üst sekme olup olmadığını kontrol etmek için bir işlev ekledim. Bu işlev:

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

Ve bu şekilde çağrılabilir (@ flynfish'in çözümüne dayanarak):

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

Bu çözüm şu anda benim için gayet iyi çalışıyor. Umarım bu başka biri için yararlı olabilir;)

Bunun benim için çalışması için bazı parçaları değiştirmek zorunda kaldım. Bootstrap 3 ve jQuery 2 kullanıyorum

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

Bu kodu sayfanıza eklemeniz yeterlidir:

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

Bu sorunu yaşadım, ancak birden çok sekme düzeyini işlemek gerekiyordu. Kod oldukça çirkin (yorumlara bakın), ancak işini yapıyor: https://gist.github.com/JensRantil/4721860 Umarım başka biri bunu yararlı bulur (ve daha iyi çözümler önerebilir!).

Diğer yanıtlardaki peices birleştirildiğinde, iç içe geçmiş birçok sekmeyi açabilen bir çözüm var:

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

Herhangi biri için önemliyse, URL'den tek bir karma değer almak ve bunu göstermek için aşağıdaki kod küçüktür ve kusursuz çalışır:

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

yaptığı şey kimliği alır ve click olayını tetikler. Basit.

Ajax ile bağlantılar için böyle sth yapıyorum #!#(örneğin / test.com #! # Test3) ama istediğiniz gibi değiştirebilirsiniz

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

Burada Github'da basit bir sayfa örneği

Bu iş parçacığının çok eski olduğunu biliyorum, ama burada kendi uygulama bırakacağım:

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

nav-Nav bağlantıları için bir sınıf öneki kullandığımı unutmayın .