Twitter Bootstrap - แท็บ - URL ไม่เปลี่ยนแปลง

ฉันใช้ Twitter Bootstrap และ "แท็บ"

ฉันมีรหัสต่อไปนี้:

<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#add">add</a></li>
    <li><a data-toggle="tab" href="#edit" >edit</a></li>
    <li><a data-toggle="tab" href="#delete" >delete</a></li>
</ul>

แท็บทำงานได้อย่างถูกต้อง แต่ใน URL ไม่ได้เพิ่ม #add, #edit, #delete

เมื่อฉันลบdata-toggleการเปลี่ยนแปลง URL แต่แท็บไม่ทำงาน

วิธีแก้ปัญหานี้หรือไม่?

ลองใช้รหัสนี้ เพิ่มแท็บ href ไปยัง url + เปิดแท็บตามแฮชในการโหลดหน้า:

$(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() || $('html').scrollTop();
    window.location.hash = this.hash;
    $('html,body').scrollTop(scrollmem);
  });
});

มีองค์ประกอบสามอย่างที่จำเป็นสำหรับโซลูชันที่สมบูรณ์:

1. แสดงแท็บที่ถูกต้องเมื่อโหลดเพจหากมีแฮชใน URL
2. การเปลี่ยนแฮชใน URL เมื่อแท็บมีการเปลี่ยนแปลง
3. เปลี่ยนแท็บเมื่อแฮชเปลี่ยน URL (ปุ่มย้อนกลับ / เดินหน้า) และตรวจสอบให้แน่ใจว่าแท็บแรกวนอย่างถูกต้อง

ฉันไม่คิดว่าความคิดเห็นใด ๆ ที่นี่หรือคำตอบที่ยอมรับจะจัดการกับสถานการณ์เหล่านี้ทั้งหมด

เนื่องจากมีส่วนเกี่ยวข้องค่อนข้างน้อยฉันคิดว่ามันเป็นปลั๊กอิน jQuery ขนาดเล็ก: https://github.com/aidanlister/jquery-stickytabs

คุณสามารถเรียกปลั๊กอินได้ดังนี้:

$('.nav-tabs').stickyTabs();

ฉันได้สร้างบล็อกโพสต์สำหรับเรื่องนี้http://aidanlister.com/2014/03/persisting-the-tab-state-in-bootstrap/

การใช้data-toggle="tab" ขอให้ปลั๊กอินจัดการแท็บซึ่งในขณะที่เรียกpreventDefaultใช้เหตุการณ์นั้น ( รหัสบน github )

คุณสามารถใช้การเปิดใช้งานแท็บของคุณเองและปล่อยให้เหตุการณ์ผ่านไป:

$('.nav-tabs a').click(function (e) {
    // No e.preventDefault() here
    $(this).tab('show');
});

และคุณต้องลบแอตทริบิวต์ data-toggle="tab"

ตรวจสอบเอกสารหากคุณมีข้อสงสัย

เนื่องจากองค์ประกอบจุดยึดของคุณเปลี่ยนแฮช URL อยู่แล้วการฟังเหตุการณ์onhashchangeจึงเป็นอีกทางเลือกหนึ่งที่ดี ดังที่ @flori ได้กล่าวไปแล้ววิธีนี้ใช้ได้ดีกับปุ่มย้อนกลับของเบราว์เซอร์

var tabs$ = $(".nav-tabs a");

$( window ).on("hashchange", function() {
    var hash = window.location.hash, // get current hash
        menu_item$ = tabs$.filter('[href="' + hash + '"]'); // get the menu element

    menu_item$.tab("show"); // call bootstrap to show the tab
}).trigger("hashchange");

สุดท้ายการทริกเกอร์เหตุการณ์หลังจากที่คุณกำหนด Listener จะช่วยแสดงแท็บที่ถูกต้องในการโหลดหน้าเว็บ

วิธีแก้ปัญหาของฉัน:

ขั้นแรกให้เพิ่มdata-valueแอตทริบิวต์ใหม่ในแต่ละaลิงก์ดังนี้:

<ul class="nav nav-tabs">
    <li class="active">
        <a data-toggle="tab" href="#tab-add" data-value="#add">add</a>
    </li>
    <li>
        <a data-toggle="tab" href="#tab-edit" data-value="#edit">edit</a>
    </li>
    <li>
        <a data-toggle="tab" href="#tab-delete" data-value="#delete">delete</a>
    </li>
</ul>

ประการที่สองเปลี่ยนรหัสของแท็บเช่นจากเป็นaddถึงtab-addอัปเดต hrefs เพื่อรวมtab-คำนำหน้า:

<div class="tab-content">
    <div class="tab-pane" id="tab-add">Add panel</div>
    <div class="tab-pane" id="tab-edit">Edit panel</div>
    <div class="tab-pane" id="tab-delete">Panel panel</div>
</div>

และสุดท้ายรหัส js:

<script type="text/javascript">
    $(function () {
        var navTabs = $('.nav-tabs a');
        var hash = window.location.hash;
        hash && navTabs.filter('[data-value="' + hash + '"]').tab('show');

        navTabs.on('shown', function (e) {
            var newhash = $(e.target).attr('data-value');
            window.location.hash = newhash;
        });
    })
</script>

นี่คือjsFiddle - แต่ใช้งานไม่ได้เนื่องจากใช้ iframe โดย jsFiddle แต่คุณสามารถอ่านแหล่งที่มาของโซลูชันของฉันได้

ปัญหาเดียวกันกับ CakePHP กับ Bootstrap 3 Tabs บวกกับเมื่อฉันส่งด้วย URL ภายนอกและจุดยึดมันจะข้ามไปที่ส่วนที่สูญเสียเมนูของฉันหลังจากตรวจสอบวิธีแก้ปัญหามากมายทำให้สิ่งนี้ ...

ขอบคุณ: http://ck.kennt-wayne.de/2012/dec/twitter-bootstrap-how-to-fix-tabs

$(document).ready(function()
 {  
//Redirecciona al tab, usando un prefijo al cargar por primera vez, al usar redirect en cake #_Pagos    
//Redirecciona al tab, usando #Pagos
/* Automagically jump on good tab based on anchor; for page reloads or links */
 if(location.hash) 
  {
     $('a[href=' + location.hash + ']').tab('show');         
  }


//Para evitar el bajar al nivel del tab, (al mostrarse el tab subimos)
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) 
{
    location.hash = $(e.target).attr('href').substr(1);
    scrollTo(0,0);      
});



//Actualiza el URL con el anchor o ancla del tab al darle clic
 /* Update hash based on tab, basically restores browser default behavior to
 fix bootstrap tabs */
$(document.body).on("click", "a[data-toggle]", function(event) 
  {
    location.hash = this.getAttribute("href");
  });


//Redirecciona al tab, al usar los botones de regresar y avanzar del navegador.
/* on history back activate the tab of the location hash if exists or the default tab if no hash exists */   
$(window).on('popstate', function() 
{
  //Si se accesa al menu, se regresa al tab del perfil (activo default), fixed conflict with menu
  //var anchor = location.hash || $("a[data-toggle=tab]").first().attr("href");
  var anchor = location.hash;
  $('a[href=' + anchor + ']').tab('show');

});   

});//Fin OnReady

นอกจากนี้ยังมีวิธีง่ายๆในการตอบสนองต่อการเปลี่ยนแปลงแฮช (เช่นปุ่มย้อนกลับ) เพียงแค่เพิ่มตัวฟังเหตุการณ์ hashchange ในโซลูชัน tomaszbak:

$(function(){
  // Change tab on load
  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);
  });

  // Change tab on hashchange
  window.addEventListener('hashchange', function() {
    var changedHash = window.location.hash;
    changedHash && $('ul.nav a[href="' + changedHash + '"]').tab('show');
  }, false);
});

ฉันใช้ Bootstrap 3.3. * และไม่มีวิธีแก้ปัญหาใด ๆ ข้างต้นช่วยฉันเลยแม้จะทำเครื่องหมายว่าเป็นคำตอบ ฉันเพิ่งเพิ่มสคริปต์ด้านล่างและใช้งานได้

$(function(){
    var hash = document.location.hash;
    if (hash) {
       $('.navbar-nav a[href="' + hash + '"]').tab('show');
    }
    $('a[data-toggle="tab"]').on('click', function (e) {
       history.pushState(null, null, $(this).attr('href'));
    });
});

หวังว่านี่จะช่วยคุณได้

ง่ายที่สุดโดยสมมติว่าคุณใช้data-toggle="tab"ไวยากรณ์ที่อธิบายไว้ที่นี่ :

$(document).on('shown.bs.tab', function(event) {
  window.location.hash = $(event.target).attr('href');
});

สำหรับผู้ที่ใช้ Ruby on Rails หรือสคริปต์ฝั่งเซิร์ฟเวอร์อื่น ๆ คุณจะต้องใช้anchorตัวเลือกบนพา ธ เนื่องจากเมื่อโหลดหน้าเว็บแล้วจะไม่มีแฮช URL คุณจะต้องใส่แท็บที่ถูกต้องผ่านลิงค์หรือการส่งแบบฟอร์มของคุณ

<%= form_for @foo, url: foo_path(@foo, anchor: dom_id(foo)) do |f| %>
# Or
<%= link_to 'Foo', foo_path(@foo, anchor: dom_id(foo)) %>

หากคุณใช้คำนำหน้าเพื่อป้องกันไม่ให้หน้าต่างข้ามไปที่ id:

<%= form_for @foo, url: foo_path(@foo, anchor: "bar_#{dom_id(foo)}") do |f| %>

แล้วคุณ CoffeeScript:

  hash = document.location.hash
  prefix = 'bar_'
  $('.nav-tabs a[href=' + hash.replace(prefix, '') + ']').tab 'show' if hash
  $('.nav-tabs a').on 'shown.bs.tab', (e) ->
    window.location.hash = e.target.hash.replace '#', '#' + prefix

หรือ JavaScript:

var hash, prefix;

hash = document.location.hash;
prefix = 'bar_';

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

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

สิ่งนี้ควรใช้ได้ใน Bootstrap 3

ขอบคุณ@tomaszbakสำหรับวิธีแก้ปัญหาดั้งเดิมอย่างไรก็ตามเนื่องจากการแก้ไขของฉันถูกปฏิเสธและฉันไม่สามารถแสดงความคิดเห็นในโพสต์ของเขาได้ฉันจะปล่อยให้เวอร์ชันปรับปรุงและอ่านได้ง่ายขึ้นเล็กน้อยที่นี่

โดยพื้นฐานแล้วจะเป็นสิ่งเดียวกัน แต่หากแก้ไขปัญหาความเข้ากันได้ข้ามเบราว์เซอร์ที่ฉันมีกับเขา

$(document).ready(function(){
   // go to hash on window load
   var hash = window.location.hash;
   if (hash) {
       $('ul.nav a[href="' + hash + '"]').tab('show');
   }
   // change hash on click
   $('.nav-tabs a').click(function (e) {
       $(this).tab('show');
       if($('html').scrollTop()){
           var scrollmem = $('html').scrollTop(); // get scrollbar position (firefox)
       }else{
           var scrollmem = $('body').scrollTop(); // get scrollbar position (chrome)
       }
       window.location.hash = this.hash;
       $('html,body').scrollTop(scrollmem); // set scrollbar position
   });
});

นี่คือตัวเลือกที่ใช้history.pushStateเพื่อให้คุณสามารถใช้ประวัติเบราว์เซอร์เพื่อย้อนกลับไปยังแท็บก่อนหน้า

  $(document).ready(function() {
  // add a hash to the URL when the user clicks on a tab
  $('a[data-toggle="tab"]').on('click', function(e) {
    history.pushState(null, null, $(this).attr('href'));
  });
  // navigate to a tab when the history changes
  window.addEventListener("popstate", function(e) {
    var activeTab = $('[href=' + location.hash + ']');
    if (activeTab.length) {
      activeTab.tab('show');
    } else {
      $('.nav-tabs a:first').tab('show');
    }
  });
});

ข้างต้นไม่ได้ผลสำหรับฉันดังนั้นนี่คือวิธีการทำงานของฉัน:

1. เพิ่มclass="tab-link"ในลิงก์ทั้งหมดที่ต้องการฟังก์ชันนี้
2. เพิ่มรหัสต่อไปนี้ในจาวาสคริปต์ของคุณ:

    window.addEventListener
    (
        'popstate',
        ฟังก์ชัน (เหตุการณ์)
        {
            tab_change ();
        }
    );

    ฟังก์ชัน tab_change ()
    {
        var แฮช = window.location.hash;
        แฮช && $ ('ul.nav a [href = "' + แฮช + '"]') .tab ('แสดง');

        $ ('.tab-link') คลิก
        (
            ฟังก์ชัน (e)
            {
                $ (this) .tab ('แสดง');

                var scrollmem = $ ('body') .scrollTop () || $ ('html') .scrollTop ();
                window.location.hash = this.hash;
                $ ('html, body') .scrollTop (scrollmem);

                $ ('ul.nav-tabs a [href = "' + window.location.hash + '"]') .tab ('แสดง');
            }
        );
    }

ฉันเข้าใจว่า OP พูดโดยใช้ JQuery แต่คุณสามารถใช้ vanilla JS เพื่อทำสิ่งนั้น:

document.querySelectorAll('ul.nav a.nav-link').forEach(link => {
    link.onclick = () => window.history.pushState(null, null, link.attributes.href.value);
});

นอกจากนี้ยังแก้ไขแท็บที่คลุมเครืออย่างมากที่ href ไม่เริ่มทำงานเมื่อใช้ jquery และ bootstrap

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 

<script type="text/javascript">
$('.nav-tabs a').click(function (e) {
    // No e.preventDefault() here.
    $(this).tab('show');
});
</script>

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>