Bootstrap 3: เก็บแท็บที่เลือกไว้ในการรีเฟรชหน้า

ฉันพยายามที่จะให้แท็บเลือกใช้งานในการฟื้นฟูที่มีเงินทุน 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');
}

ฉันชอบเก็บแท็บที่เลือกไว้ในแฮชแวลูของหน้าต่าง นอกจากนี้ยังช่วยให้สามารถส่งลิงก์ไปยังเพื่อนร่วมงานที่เห็นหน้า "เดียวกัน" ได้ เคล็ดลับคือการเปลี่ยนแฮชของตำแหน่งเมื่อเลือกแท็บอื่น หากคุณใช้ # ในเพจอยู่แล้วอาจต้องแบ่งแฮชแท็ก ในแอปของฉันฉันใช้ ":" เป็นตัวคั่นค่าแฮช

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

นี่คือสิ่งที่ดีที่สุดที่ฉันลอง:

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

การผสมผสานระหว่างคำตอบอื่น ๆ :

• ไม่กระโดดเมื่อคลิก
• บันทึกเกี่ยวกับแฮชตำแหน่ง
• บันทึกใน 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');
  });

รหัสของ Xavi ทำงานได้เต็มที่ แต่เมื่อไปที่หน้าอื่นส่งแบบฟอร์มแล้วถูกเปลี่ยนเส้นทางไปยังหน้าที่มีแท็บของฉันไม่ได้โหลดแท็บที่บันทึกไว้เลย

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

อันนี้ใช้ 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

การใช้คำตอบจากXavi Martínezและkopporฉันคิดวิธีแก้ปัญหาที่ใช้แฮช 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...
});

มันไม่ได้ติดตามปุ่มย้อนกลับเหมือนในกรณีของโซลูชันของXavi Martínez

รหัสของฉันมันใช้ได้สำหรับฉันฉันใช้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');

ฉันพยายามนี้และการทำงาน: (โปรดแทนที่นี้ด้วยยาหรือแท็บที่คุณใช้)

    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/

นี่เป็นปี 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>

และนี่คือรหัสสำหรับแท็บ bootstrap:

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

อย่าลืมเรียก bootstrap และสิ่งพื้นฐานอื่น ๆ 

นี่คือรหัสด่วนสำหรับคุณ:

<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! :)

เนื่องจากฉันไม่สามารถแสดงความคิดเห็นได้ฉันจึงคัดลอกคำตอบจากด้านบนมันช่วยฉันได้มาก แต่ฉันเปลี่ยนให้ทำงานกับคุกกี้แทน #id ดังนั้นฉันจึงต้องการแบ่งปันการเปลี่ยนแปลง ทำให้สามารถจัดเก็บแท็บที่ใช้งานได้นานกว่าการรีเฟรชเพียงครั้งเดียว (เช่นการเปลี่ยนเส้นทางหลายครั้ง) หรือเมื่อมีการใช้ 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>

ฉันพยายามรหัสที่นำเสนอโดยXavi Martínez มันใช้งานได้ แต่ไม่ใช่สำหรับ 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
    })
  });
};

ขอบคุณสำหรับการแบ่งปัน.

โดยอ่านวิธีแก้ปัญหาทั้งหมด ฉันคิดวิธีแก้ปัญหาที่ใช้แฮช 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');
    }
});

สำหรับ 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');
})

การใช้ html5 ฉันปรุงสิ่งนี้:

บางที่ในหน้า:

<h2 id="heading" data-activetab="@ViewBag.activetab">Some random text</h2>

viewbag ควรมี id สำหรับเพจ / องค์ประกอบเช่น: "testing"

ฉันสร้าง site.js และเพิ่ม scrip ในหน้า:

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

ทั้งหมดทักทายแอตทริบิวต์ข้อมูล :)

นอกเหนือจากคำตอบของ Xavi Martínezที่หลีกเลี่ยงการกระโดดเมื่อคลิก

หลีกเลี่ยงการกระโดด

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

เราใช้ jquery ทริกเกอร์เพื่อ onload มีสคริปต์กดปุ่มสำหรับเรา

$ ( "class_name.") ทริกเกอร์ ( 'คลิก').

วิบัติมีหลายวิธีที่จะทำเช่นนี้ ฉันคิดสิ่งนี้สั้นและเรียบง่าย หวังว่านี่จะช่วยคนอื่น ๆ

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

มีวิธีแก้ไขหลังจากโหลดหน้าใหม่และคงแท็บที่คาดไว้ตามที่เลือกไว้

สมมติว่าหลังจากบันทึกข้อมูล 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');
    }
});