ฉันจะทำให้แท็บปัจจุบันใช้งานกับ twitter bootstrap ได้อย่างไรหลังจากโหลดหน้าใหม่


87

ฉันกำลังใช้แท็บกับ Twitter Bootstrap และต้องการเลือกแท็บเดียวกันหลังจากที่ผู้ใช้โพสต์ข้อมูลและรีโหลดเพจ

วิธีนี้ทำได้อย่างไร?

สายปัจจุบันของฉันไปที่ inti แท็บมีลักษณะดังนี้:

<script type="text/javascript">

$(document).ready(function() {

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

แท็บของฉัน:

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

1
ดูเหมือนว่าจะเป็นคำถามซ้ำกับstackoverflow.com/questions/18999501/…
koppor

เกี่ยวข้องกับstackoverflow.com/questions/7862233/…
Tim Abell

คำตอบ:


138

คุณจะต้องใช้ localStorage หรือคุกกี้เพื่อจัดการสิ่งนั้น นี่เป็นวิธีแก้ปัญหาที่รวดเร็วและสกปรกซึ่งสามารถปรับปรุงได้อย่างมากมาย แต่อาจเป็นจุดเริ่มต้น:

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


12
ใช้ดีกว่า$(this).attr('href')แทน$(e.target).attr('id')ซึ่งให้แฮชโดยไม่มี url ที่สมบูรณ์ คุณต้องใช้.tab()บนแท็กdata-toggle="tab"แทน$('#'+lastTab). ดูเพิ่มเติม: stackoverflow.com/questions/16808205/…
Bass Jobsen

3
ดูเหมือนว่าวิธีการเปลี่ยนแปลงเล็กน้อยใน Bootstrap 3 shownดูเหมือนจะไม่ได้ผลอีกต่อไปต้องเปลี่ยนเป็นshown.bs.tab. หมายเหตุ: ฉันเข้าใจ javascript และคณะเช่นเดียวกับฉันเข้าใจเศรษฐศาสตร์ ... ดังนั้นใครที่รู้ว่ามีอะไรเกิดขึ้นโปรดอย่าลังเลที่จะแก้ไขฉัน
Chaz

10
แก้ไขให้ทำงานกับตัวควบคุมแท็บหลายตัว (และ Bootstrap 3): gist.github.com/brendanmckenzie/8f8008d3d51c07b2700f
Brendan

1
ไปที่แท็บแรกและกลับมาที่แท็บปัจจุบันหลังจากรีเฟรช
Raviteja

23

ทำให้สิ่งนี้ทำงานได้โดยใช้คุกกี้และยังลบคลาส 'active' ออกจากแท็บและบานหน้าต่างแท็บอื่น ๆ ... และเพิ่มคลาส 'active' ลงในแท็บปัจจุบันและบานหน้าต่างแท็บ

ฉันแน่ใจว่ามีวิธีที่ดีกว่านี้ แต่ดูเหมือนจะใช้ได้ผลในกรณีนี้

ต้องใช้ปลั๊กอินคุกกี้ 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');
  }
});

ฉันไม่สามารถทำให้โซลูชัน localStorage ทำงานได้แม้ว่ามันจะดูสมเหตุสมผลก็ตาม โซลูชันนี้พร้อมใช้งานและปลั๊กอิน $ .cookie มีประโยชน์มากที่จะมี
Michael J.Calkins

ใช้. tab () บนแท็กที่มี data-toggle = "tab" แทนการลบและเพิ่มคลาสโปรดดูที่: stackoverflow.com/questions/16808205/…
Bass Jobsen

สำหรับเลย์เอาต์ของฉันเนื่องจากฉันใช้ 'จางลงในการใช้งาน' สำหรับ div จำเป็นต้องเปลี่ยนสองบรรทัดสุดท้ายเพื่อเพิ่มหรือลบ 'in active'
Obromios

18

คำตอบอื่น ๆ ทั้งหมดถูกต้อง คำตอบนี้จะคำนึงถึงความจริงที่ว่าอาจมีหลายรายการul.nav.nav-pillsหรือul.nav.nav-tabsในหน้าเดียวกัน ในกรณีนี้คำตอบก่อนหน้านี้จะล้มเหลว

ยังคงใช้localStorageแต่มีสตริงJSONเป็นค่า นี่คือรหัส:

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

บิตนี้สามารถใช้ได้กับทั้งแอปในทุกหน้าและจะใช้ได้กับทั้งแท็บและยา นอกจากนี้ยังให้แน่ใจว่าแท็บหรือยาไม่ได้ใช้งานโดยค่าเริ่มต้นมิฉะนั้นคุณจะเห็นผลการสั่นไหวในการโหลดหน้าเว็บ

สำคัญ : ตรวจสอบให้แน่ใจว่าผู้ปกครองulมีรหัส ขอบคุณ Alain


2
นอกจากนี้สำหรับ BS3 ให้แทนที่เหตุการณ์ 'แสดง' ด้วย 'shown.bs.tab'
Alain

18

สำหรับตัวเลือกที่ดีที่สุดให้ใช้เทคนิคนี้:

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

12

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

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

ขอบคุณสำหรับคำตอบนี้ มันใช้งานได้ดีสำหรับฉันและฉันไม่ต้องการจัดการกับคุกกี้สำหรับปัญหานี้เท่านั้นดังนั้นจึงเป็นเรื่องที่ดี
nico008

@koppor สิ่งนี้ใช้ไม่ได้มีเหตุการณ์หลังกลับ ฉันเพิ่มปุ่มลิงค์<asp:LinkButton CssClass="form-search" ID="LinkButtonSearch" runat="server">Search</asp:LinkButton> หลังจากคลิกที่ปุ่มมันเป็นแท็บเริ่มต้นที่ใช้งานได้ไม่ใช่แท็บปัจจุบัน จะแก้ไขได้อย่างไร ??
Djama

6

เพื่อป้องกันไม่ให้หน้ากะพริบในแท็บแรกจากนั้นแท็บที่คุกกี้บันทึกไว้ (สิ่งนี้เกิดขึ้นเมื่อคุณกำหนดคลาส "active" ตามค่าเริ่มต้นใน TAB แรก)

ลบคลาสที่ "ใช้งานอยู่" ของแท็บและบานหน้าต่างเช่น:

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

วางสคริปต์ด้านล่างเพื่อตั้งค่าแท็บแรกเป็นค่าเริ่มต้น (ต้องใช้ปลั๊กอินคุกกี้ 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');
        }
    });

3

ต้องการผลซีดจาง? อัปเดตรหัสของ @ Oktav:

  1. สำหรับ Bootstrap 3
  2. ตั้งค่าคลาสใน li และ div ของแท็บเพื่อให้การเฟดทำงานได้อย่างถูกต้อง โปรดทราบว่า div เนื้อหาทั้งหมดจำเป็นต้องมีclass="tab-pane fade"

รหัส:

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

3

ฉันมีแท็บในหลายหน้าและ localStorage เก็บ lastTab จากหน้าก่อนหน้าเช่นกันดังนั้นสำหรับหน้าถัดไปเนื่องจากมี lastTab ของหน้าก่อนหน้าอยู่ในที่เก็บข้อมูลจึงไม่พบแท็บที่ตรงกันที่นี่จึงไม่มีการแสดงอะไร ฉันแก้ไขด้วยวิธีนี้

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

แก้ไข:ฉันสังเกตเห็นว่าฉันจะต้องมีlastTabชื่อตัวแปรที่แตกต่างกันสำหรับหน้าต่างๆไม่เช่นนั้นจะเขียนทับกันเสมอ เช่นlastTab_klanten, lastTab_bestellingenฯลฯ สำหรับสองหน้าแตกต่างกันklantenและbestellingenทั้งสองมีข้อมูลที่แสดงในแท็บ

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

3

ฉันทำให้มันใช้งานได้กับโซลูชันที่คล้ายกันเช่น @dgabriel ในกรณีนี้ลิงก์<a>ไม่จำเป็นต้องidระบุแท็บปัจจุบันตามตำแหน่ง

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

ฉันคิดว่ารหัสของคุณผิดวิธีที่ getItem ควรจะแสดงก่อนที่จะแสดงปัญหาในการประกาศ indexTab สองครั้ง
John Magnolia

@JohnMagnolia ฉันตั้งชื่อindexTabสองครั้ง แต่แตกต่าง ดัชนี. ดังนั้นผมจึงจะเรียก 2 lastIndexTabหนึ่ง เกี่ยวกับshownนั่นคือเหตุการณ์ดังนั้นจึงไม่เกิดขึ้นจนกว่าคุณจะเปิดแท็บดังนั้นจึงไม่สำคัญว่าจะเกิดgetItemขึ้นก่อน
Jaider

1

ฉันขอแนะนำการเปลี่ยนแปลงต่อไปนี้

  1. ใช้ปลั๊กอินเช่นamplify.storeซึ่งจัดเตรียม crossbrowser / crossplatform localstorage API ที่มีทางเลือกในตัว

  2. กำหนดเป้าหมายแท็บที่ต้องการบันทึกเช่น$('#div a[data-toggle="tab"]')เพื่อขยายฟังก์ชันนี้ไปยังคอนเทนเนอร์แท็บหลายแท็บที่มีอยู่ในเพจเดียวกัน

  3. ใช้ตัวระบุเฉพาะ(url ??)เพื่อบันทึกและกู้คืนแท็บที่ใช้ล่าสุดในหลาย ๆ เพจ


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


0

แนวทางฝั่งเซิร์ฟเวอร์ ตรวจสอบให้แน่ใจว่าองค์ประกอบ html ทั้งหมดมี class = "" ในกรณีที่ไม่ได้ระบุหรือคุณจะต้องจัดการกับ 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";
        }
    }

0

หากคุณต้องการแสดงแท็บแรกในครั้งแรกที่คุณเข้าสู่หน้าให้ใช้รหัสนี้:

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


0

นี่คือตัวอย่างที่ผมทำผลงานที่มีเงินทุน 3และjQueryและมี URL ที่แตกต่างกันที่มีแท็บที่แตกต่างกัน ไม่สนับสนุนหลายแท็บต่อหน้าแต่ควรปรับเปลี่ยนได้ง่ายหากคุณต้องการคุณสมบัตินั้น

/**
 * 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();

    }

});

0

$ (เอกสาร) .ready (ฟังก์ชัน () {

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

            }  
        });

});


0

หากคุณมีมากกว่าหนึ่งแท็บในหน้าคุณสามารถใช้รหัสต่อไปนี้

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

0

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

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

0

ฉันใช้สิ่งนี้กับ MVC:

  • มีฟิลด์จำนวนเต็ม SelectedTab ในโมเดลเพื่อส่งค่าไปยังเมธอด POST

ส่วน 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>

ส่วน 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>
}
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.