পৃষ্ঠা পুনরায় লোড হওয়ার পরে টুইটার বুটস্ট্র্যাপের সাহায্যে আমি কীভাবে বর্তমান ট্যাবটিকে সক্রিয় রাখতে পারি?


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>

4
এই একটি ডুপ্লিকেট প্রশ্ন মনে করা হয় stackoverflow.com/questions/18999501/...
koppor

উত্তর:


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

সুন্দর একটি কুঁড়ি, আপনার সমাধান জুমলা 30 কোর, joomlacode.org/gf/project/joomla/tracker/…
বেন

12
এর $(this).attr('href')পরিবর্তে আরও ভাল ব্যবহার করুন $(e.target).attr('id')যা আপনাকে সম্পূর্ণ ইউআরএল ছাড়াই হ্যাশ দেয়। এছাড়াও আপনি আবেদন করতে হবে .tab()সঙ্গে একটি ট্যাগ উপর data-toggle="tab"পরিবর্তে $('#'+lastTab)। আরও দেখুন: stackoverflow.com/questions/16808205/...
বাস Jobsen

4
মনে হচ্ছে পদ্ধতি বুটস্ট্র্যাপ 3. সামান্য পরিবর্তন দেখায় shownআর কাজ বলে মনে হয় পরিবর্তন করতে হয়েছে shown.bs.tab। দ্রষ্টব্য: আমি জাভাস্ক্রিপ্ট ইত্যাদি সম্পর্কে পাশাপাশি অর্থনীতিও বুঝতে পারি ... সুতরাং যে কেউ কী জানে দয়া করে আমাকে সংশোধন করতে দ্বিধা বোধ করবেন।
চজ

10
একাধিক ট্যাব নিয়ন্ত্রণ (এবং বুটস্ট্র্যাপ 3) এর সাথে কাজ করার জন্য পরিবর্তিত হয়েছে: gist.github.com/brendanmckenzie/8f8008d3d51c07b2700f
ব্রেন্ডন

4
এটি প্রথম ট্যাবে যাচ্ছে এবং রিফ্রেশের পরে বর্তমান ট্যাবে ফিরে আসবে
রবিতেজা

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

যৌক্তিক বলে মনে হলেও কাজ করার জন্য আমি স্থানীয় স্টোরেজ সমাধানটি পাইনি। বাক্সের বাইরে এই সমাধান এবং ook। কুকি প্লাগইনটি পাওয়া খুব সহজ।
মাইকেল জে। ক্যালকিন্স

সঙ্গে ডেটা-টগল = "ট্যাব" পরিবর্তে অপসারণ এবং শ্রেণীর যোগ করার দেখতে একটি ট্যাগ উপর .tab আবেদন (): stackoverflow.com/questions/16808205/...
বাস Jobsen

আমার বিন্যাসের জন্য, কারণ আমি ডিভগুলির জন্য 'ফেইড ইন অ্যাক্টিভ' ব্যবহার করছিলাম, 'সক্রিয় অবস্থায়' যুক্ত করতে বা অপসারণ করতে শেষ দুটি লাইন পরিবর্তন করা দরকার।
ওবরোমিওস

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একটি আইডি রয়েছে। ধন্যবাদ আলাইন


4
এছাড়াও, BS3 এর জন্য, 'দেখানো' ইভেন্টটি 'দেখানো.এস.এস.টি.বি' দিয়ে প্রতিস্থাপন করুন
আলেন

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

@ কোপ্পোর, এটি কোনও পোস্টব্যাক ইভেন্ট রয়েছে এমন কাজ করে না। আমি লিঙ্কবটনটি যুক্ত করেছি <asp:LinkButton CssClass="form-search" ID="LinkButtonSearch" runat="server">Search</asp:LinkButton> , বোতামটি ক্লিক করার পরে এটি ডিফল্ট ট্যাব যা বর্তমান ট্যাবটি নয় সক্রিয় হয়ে যায়। আমি কীভাবে এটা ঠিক করতে পারি ??
জাজা

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

বিবর্ণ প্রভাব চান? @ ওকতভের কোডটির আপডেট সংস্করণ:

  1. বুটস্ট্র্যাপ 3 এর জন্য
  2. লিড এবং ট্যাবের ডিভের ক্লাসগুলি সেট করে সঠিকভাবে কাজ করতে ফেইডিং সক্ষম করতে। নোট করুন যে সমস্ত সামগ্রীর ডিভগুলি প্রয়োজন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');
  }
});

আমি মনে করি আপনার কোডটি ভুল উপায়ে রাউন্ড গেট আইটেমটি দেখানোর আগে হওয়া উচিত, এছাড়াও সূচকটিবকে দু'বার ঘোষণার বিষয়টিকে সলস করে।
জন ম্যাগনোলিয়া

@ জনম্যাগনোলিয়া আমি indexTabদু'বার নাম রেখেছি তবে এটি ভিন্ন f সূচক সুতরাং আমি দ্বিতীয় কল করব lastIndexTab। সম্পর্কিত shown, এটি একটি ইভেন্ট, সুতরাং আপনি কোনও ট্যাব না খোলার আগ পর্যন্ত এটি ট্রিগার হবে না, তাই আগে থাকলে তা বিবেচ্য নয় getItem
জয়দার

1

আমি নিম্নলিখিত পরিবর্তনগুলির পরামর্শ দিই

  1. এমপ্লিফাইস্টোরের মতো প্লাগইন ব্যবহার করুন যা বিল্টিন ফলব্যাক সহ ক্রসব্রোজার / ক্রসপ্ল্যাটফর্ম লোকালস্টেজ এপিআই সরবরাহ করে।

  2. যে ট্যাবটি সংরক্ষণ করতে হবে $('#div a[data-toggle="tab"]')তেমন টার্গেট করুন যাতে এই কার্যকারিতাটি একই পৃষ্ঠায় বিদ্যমান একাধিক ট্যাব ধারকগুলিতে প্রসারিত করতে পারে।

  3. (url ??)একাধিক পৃষ্ঠায় সর্বশেষ ব্যবহৃত ট্যাবগুলি সংরক্ষণ এবং পুনরুদ্ধার করতে একটি অনন্য সনাক্তকারী ব্যবহার করুন ier


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

সার্ভার সাইড অ্যাপ্রোচ। নিশ্চিত হয়ে থাকুন যে সমস্ত এইচটিএমএল উপাদানগুলির শ্রেণি = "" নির্দিষ্ট না আছে বা আপনার শূন্যগুলি পরিচালনা করতে হবে to

    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 এবং বিভিন্ন ট্যাবযুক্ত বিভিন্ন ইউআরএল নিয়ে কাজ করেএটি প্রতি পৃষ্ঠায় একাধিক ট্যাব সমর্থন করে না তবে আপনার যদি সেই বৈশিষ্ট্যটির প্রয়োজন হয় তবে এটি একটি সহজ পরিবর্তন হওয়া উচিত।

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

document (দস্তাবেজ)। প্রস্তুত (ফাংশন () {

        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

আমি এটি এমভিসির সাথে ব্যবহার করছি:

  • পোষ্ট পদ্ধতিতে মান প্রেরণের জন্য মডেলটিতে একটি নির্বাচিত ট্যাব পূর্ণসংখ্যা ক্ষেত্র রয়েছে

জাভাস্ক্রিপ্ট বিভাগ:

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

এইচটিএমএল বিভাগ:

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