मैं एक पृष्ठ पुनः लोड करने के बाद ट्विटर बूटस्ट्रैप के साथ वर्तमान टैब को कैसे सक्रिय रख सकता हूं?


87

मैं वर्तमान में ट्विटर बूटस्ट्रैप के साथ टैब का उपयोग कर रहा हूं और उपयोगकर्ता द्वारा पोस्ट किए जाने और पृष्ठ को लोड करने के बाद उसी टैब का चयन करना चाहता हूं।

यह कैसे किया जाता है?

टैब को अंतर करने के लिए मेरा वर्तमान कॉल इस तरह दिखता है:

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


जवाबों:


138

आपको इसे प्रबंधित करने के लिए लोकलस्टोरेज या कुकीज का उपयोग करना होगा। यहां एक त्वरित और गंदा समाधान है जिसे काफी हद तक सुधारा जा सकता है, लेकिन आपको एक शुरुआती बिंदु दे सकता है:

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

अच्छा एक कली, आपका समाधान जुमला
Benn

12
$(this).attr('href')इसके बजाय बेहतर उपयोग $(e.target).attr('id')जो आपको पूर्ण यूआरएल के बिना हैश देता है। आपको .tab()टैग के साथ टैग को भी लागू करना data-toggle="tab"होगा $('#'+lastTab)। इसे भी देखें: stackoverflow.com/questions/16808205/…
बास जॉसेन

3
ऐसा लगता है कि बूटस्ट्रैप 3 में विधि थोड़ा shownबदल जाती है shown.bs.tab। अब कोई काम नहीं करता है, इसे बदलना पड़ा । नोट: मैं जावास्क्रिप्ट एट अल के बारे में और साथ ही साथ मैं अर्थशास्त्र को समझता हूं ... इसलिए कोई व्यक्ति जो जानता है कि कृपया मुझे सुधारने के लिए स्वतंत्र महसूस हो रहा है।
चेज़

10
कई टैब नियंत्रण (और बूटस्ट्रैप 3) के साथ काम करने के लिए संशोधित: gist.github.com/brendanmckenzie/8f8008d3d51c07b2700f
ब्रेंडन

1
यह पहले टैब पर जा रहा है और ताज़ा करने के बाद वर्तमान टैब पर वापस आ रहा है
रवितजा

23

कुकी का उपयोग करके काम करने के लिए इसे प्राप्त करें और किसी भी अन्य टैब और टैब पैन से 'सक्रिय' वर्ग को हटा दें ... और 'सक्रिय' वर्ग को वर्तमान टैब और टैब फलक में जोड़ दें।

मुझे यकीन है कि ऐसा करने का एक बेहतर तरीका है, लेकिन यह इस मामले में काम करता है।

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

मैं स्थानीय स्तर पर काम नहीं कर सका, भले ही यह तर्कसंगत लगे। यह समाधान बॉक्स और $ .cookie प्लगइन से बहुत आसान है।
माइकल जे। कल्किंस

लागू करें। टॅब () टैग पर डेटा-टॉगल = "टैब" के साथ एक टैग हटाने और जोड़ने के बजाय कक्षाएं भी देखें: stackoverflow.com/questions/16808205/-
बास जॉसेन

अपने लेआउट के लिए, क्योंकि मैं divs के लिए 'फ़ेड इन ऐक्टिव' का इस्तेमाल कर रहा था, जिसे 'ऐक्टिव' में जोड़ने या निकालने के लिए आखिरी दो लाइनों को बदलने की ज़रूरत थी।
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पास एक आईडी है। धन्यवाद एलेन


2
इसके अलावा, BS3 के लिए, 'दिखाए गए' ईवेंट को 'show.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

पहले टैब पर चमकती पृष्ठ और फिर कुकी द्वारा सहेजे गए टैब को रोकने के लिए (यह तब होता है जब आप पहले टैब में डिफ़ॉल्ट रूप से "सक्रिय" वर्ग का निर्धारण करते हैं)

टैब और पैन जैसे "सक्रिय" वर्ग निकालें:

<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. बूटस्ट्रैप 3 के लिए
  2. ठीक से काम करने में सक्षम करने के लिए ली और टैब के div पर कक्षाएं सेट करता है। ध्यान दें कि सभी सामग्री divs की जरूरत है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

मेरे पास कई पृष्ठों में टैब था और लोकलस्टोरेज पिछले पेजों से लास्टटैब रखता है, इसलिए अगले पेज के लिए, क्योंकि इसमें पिछले पेज का लास्टटैब स्टोरेज में था, इसलिए इसमें कोई मिलान टैब नहीं मिला, इसलिए कुछ भी प्रदर्शित नहीं किया जा रहा था। मैंने इसे इस तरह से संशोधित किया।

$(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 घोषित करने के मुद्दे को भी हल करता है।
जॉन मैग्नोलिया

@ जॉनमोगनोलिया मैंने नाम दिया indexTab दो बार लेकिन एक अंतर है। सूचकांक। तो मैं दूसरी को बुलाऊंगा lastIndexTab। के संबंध में shown, यह एक घटना है, इसलिए जब तक आप एक टैब नहीं खोलते हैं, तब तक यह ट्रिगर नहीं होगा, इसलिए इससे कोई फर्क नहीं पड़ता कि क्या पहले है getItem
जैदर

1

मैं निम्नलिखित परिवर्तनों का सुझाव देता हूं

  1. Amplify.store जैसे प्लगइन का उपयोग करें जो बिलिन फॉलबैक के साथ एक क्रॉसब्रोसर / क्रॉसप्लेट रिकॉर्डर लोकलस्टोरेज एपीआई प्रदान करता है।

  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 तत्वों में वर्ग = "" है, यदि निर्दिष्ट नहीं है या आपको नल को संभालने की आवश्यकता होगी।

    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

$ (दस्तावेज़)। पहले से ही (फ़ंक्शन) ({

        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

मैं एमवीसी के साथ इसका उपयोग कर रहा हूं:

  • मूल्य को POST विधि में भेजने के लिए मॉडल में एक SelectTab पूर्णांक फ़ील्ड है

जावास्क्रिप्ट अनुभाग:

<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>
}
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.