বুটস্ট্র্যাপ 3: পৃষ্ঠায় রিফ্রেশে নির্বাচিত ট্যাবটি রাখুন

Question

আমি বুটস্ট্র্যাপ 3 দিয়ে রিফ্রেশে নির্বাচিত ট্যাবটিকে সক্রিয় রাখার চেষ্টা করছি । ইতিমধ্যে এখানে কিছু প্রশ্ন জিজ্ঞাসা করা হয়েছে এবং যাচাই করে দেখেছি এবং আমার পক্ষে কাজ করে নি। আমি কোথায় ভুল জানি না। এখানে আমার কোড

এইচটিএমএল

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

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

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

Comments

এটি কাজ না করার কারণ হ'ল, এটি নির্বাচিত ট্যাবটি সংরক্ষণ করছে না। যখন আমি করেছিলাম console.log("selectedTab::"+selectedTab);, আমি পেয়েছিলাম: selectedTab::undefined। সুতরাং আপনার প্রয়োগ করা যুক্তিটি সঠিক নয়

— দ্য ডার্ক নাইট

আপনি কি দয়া করে আমাকে গাইড করতে পারেন?

— কোড প্রেমিকা

আমি এটি ঠিক করার চেষ্টা করছি। যদি আমি এটি করি তবে আমি এখানে আপনার জন্য উত্তর পোস্ট করব

— দ্য ডার্ক নাইট

আমি তার প্রশংসা করি .. সাহায্য করার জন্য আপনাকে ধন্যবাদ ..

— কোড প্রেমিকা

আমি মনে করি এটি কার্যকর হবে: jsbin.com/UNuYoHE/2/edit । যদি এটি আমাকে জানতে না দেয় তবে আমি উত্তরটি একটি চকচকে পদ্ধতিতে পোস্ট করব। আপনি ডিভি ট্যাব পাঠ্যগুলিও দেখতে চান। আপনি যখন তাদের ক্লিক করেন তারা যথাযথ প্রতিক্রিয়া দেয় না। উদাহরণস্বরূপ, আপনি যদি ট্যাব 4 ক্লিক করেন তবে আপনি ট্যাব 1 পাঠ্য পাবেন।

— দ্য ডার্ক নাইট

Answer 1

আমি উইন্ডোর হ্যাশভ্যালুতে নির্বাচিত ট্যাবটি সঞ্চয় করতে পছন্দ করি। এটি সহকর্মীদের লিঙ্কগুলি প্রেরণে সক্ষম করে, যারা "একই" পৃষ্ঠাটি দেখেন না। কৌশলটি হ'ল হ্যাশটি পরিবর্তন করতে হবে যখন অন্য ট্যাব নির্বাচন করা হয়। আপনি যদি ইতিমধ্যে আপনার পৃষ্ঠায় # ব্যবহার করেন তবে সম্ভবত হ্যাশ ট্যাগকে বিভক্ত করতে হবে। আমার অ্যাপ্লিকেশনটিতে, আমি হ্যাশ মান পৃথককারী হিসাবে ":" ব্যবহার করি।

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

Comments

স্ক্রিপ্ট বিভাগে, আপনার শেষের দিকে একটি অর্ধ-কোলন যুক্ত করা উচিত e.preventDefault();এবং$(this).tab('show');

— শান অ্যাডামস-হিয়েট

দুর্ভাগ্যক্রমে ব্রাউজারটি যখন আপনি ক্লিক করেন তখন ট্যাব সামগ্রীতে ঝাঁপিয়ে পড়ে। আপনি উইন্ডো.লোকেশন.হ্যাশ মান সেট করার সময় এটি ডিফল্ট আচরণ। একটি বিকল্প হয়তো পুশ স্টেট ব্যবহার করছে তবে আপনার আইই <= 9 এর জন্য একটি পলিফিল প্রয়োজন need আরও ইনফো এবং অন্যান্য বিকল্প সমাধানের জন্য স্ট্যাকওভারফ্লো // প্রশ্নগুলি

— ফিলিপ মাইকেল

আইডিটিতে "জাল স্ক্রোল" রোধ করার কোনও উপায় কি আমরা যখন উপাদানটিতে ক্লিক করি তখন?

— প্যাট্রিস পলিউকিন

স্ক্রোলটি ট্যাব পৃষ্ঠাগুলিতে নির্ধারিত আইডির কারণে। আপনি যদি শব্দার্থক আইডি ব্যবহার করেন এবং হ্যাশটি ম্যাঙ্গেল করেন (যেমন উপসর্গ / প্রত্যয় যুক্ত করুন) এটি কোনও বৈধ আইডি হিসাবে স্বীকৃত হবে না এবং কোনও স্ক্রোল ঘটবে না। এর সাথে উত্তরটি প্রসারিত করবে।

— অ্যালেক্স মাজারিওল

@ কপ্পোর এটি কাজ করে তবে আমি অন্য সংরক্ষিত ট্যাবে সরাসরি (লিঙ্কের মাধ্যমে) ঝাঁপ দিলে এটি লিঙ্কের ট্যাবটিতে ঝাঁপ দেওয়ার আগে হোম সারণি বা প্রথম ট্যাবটি দ্রুত প্রায় 1 সেকেন্ডের মধ্যে প্রদর্শিত হয় .. এটিকে প্রথম প্রদর্শিত হতে বাধা দেওয়ার জন্য কোনও ধারণা ট্যাব যেহেতু এটির প্রয়োজন নেই?

— এমবয়

Answer 2

এটিই আমি সেরা চেষ্টা করেছি:

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

Comments

এটি গ্রহণযোগ্য সমাধানের চেয়ে আরও ভাল কাজ করে (আরও ভাল করে বলতে চাইছি: অনুলিপি এবং

— পেস্টগুলি

সর্বকালের সেরা অনুলিপি এবং পেস্ট করুন: পি

— ঘোস্টফ

আমার ধারণা সিলেক্টর বদলে নেওয়া "a[data-toggle=tab]"আরও ভাল হবে। নির্বাচক এখন যেভাবে লিখিত হয়েছে এটি যেমন কোনও লিঙ্কে ক্লিক করে উদাহরণস্বরূপ একটি মডেল খুলুন তখন এটি ব্রাউজারের ইউআরএলও পরিবর্তন করে।

— leifdenby

আপনি নির্বাচকের উপর 'a [href = "' + অবস্থান.hash + '"]' এর মতো স্ট্রিং ব্র্যাকেট যুক্ত করতে চাইতে পারেন। একটি সিনট্যাক্স ত্রুটিতে হোঁচট খেয়েছে।

— এসডাস্ক্যাপ

এই ব্যবহার করে হিসাবে হয় বুটস্ট্র্যাপ dropdowns (যা ব্যবহার সঙ্গে বিরোধ data-toggle="dropdown"। এবং আমি এক ক্ষেত্রে ট্যাব একই পৃষ্ঠায় আছে এরকম যা কেউ মত এখানে প্রস্তাব, শুধু প্রতিস্থাপন $(document.body).on("click", "a[data-toggle]", function(event) {সঙ্গে $(document.body).on("click", "a[data-toggle='tab']", function(event) {আমার জন্য কৌতুক করেনি।

— Jiveman

Answer 3

অন্যের মধ্যে একটি মিশ্রণ উত্তর:

• ক্লিক এ কোন লাফ না
• অবস্থান হ্যাশ এ সংরক্ষণ করুন
• লোকালস্টোরেজে সংরক্ষণ করুন (যেমন: ফর্ম জমা দেওয়ার জন্য)

• কেবল অনুলিপি করুন এবং পেস্ট করুন;)

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

Comments

লজ্জা আমি অন্যান্য সমাধানগুলি প্রথমে চেষ্টা করেছিলাম - এটি সর্বোত্তম কাজ করে!

— tdc

সেরা সমাধান আমি বিভিন্ন থেকে চেষ্টা করেছি। ট্যাব সামগ্রীতে জাম্পিং বিরক্তিকর ছিল

— কেনটোর

সামগ্রী উত্তরটি এখনও এই উত্তরটির সাথে রয়েছে

— shazyriver

দুর্দান্ত সমাধান: অনুলিপি করুন, পেস্ট করুন, মধ্যাহ্নভোজনে যান। খুশী হলাম।

— গ্যারি স্ট্যান্টন

সর্বকালের সেরা সমাধান

— ভাগ্যবান

Answer 4

জাভির কোডটি পুরোপুরি পুরোপুরি কাজ করছিল। কিন্তু অন্য পৃষ্ঠায় নেভিগেট করার সময়, একটি ফর্ম জমা দেওয়ার পরে, আমার ট্যাবগুলি সহ পৃষ্ঠাতে পুনঃনির্দেশ করা সঞ্চিত ট্যাবটি মোটেই লোড করা হয়নি।

লোকালস্টোরেশন উদ্ধারে (সামান্য এনগুইনের কোড পরিবর্তন হয়েছে):

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

Comments

এই তো সোনার! এটি এমনকি মডেলগুলির সাথেও কাজ করে! দুর্দান্ত উত্তর।

— লেচ ওসিওস্কি

এই কোডটি দুর্দান্ত, এবং আপনি যদি সাইটটি ছেড়ে দেন (সেশনটি শেষ করে) এবং পরে ফিরে আসে তবে আপনি যদি ট্যাবটি নির্বাচিত থাকতে চান তবে দুর্দান্ত কাজ করে। নির্বাচনটি বর্তমান অধিবেশন চলাকালীন কেবল স্থিতিশীল থাকার জন্য এবং পরবর্তী সেশনের ডিফল্ট ট্যাবে ফিরে আসার জন্য, "লোকালস্টোরেশন" এর দুটি দৃষ্টান্ত "সেশনস্টোরেশন" এর সাথে প্রতিস্থাপন করুন।

— গ্যারি.আরে

সংক্ষিপ্ত, মিষ্টি, কপি / পেস্ট সমাধান বুটস্ট্র্যাপ 4. সাথে সুন্দরভাবে কাজ করে

— সিএফপি সাপোর্ট

বাহ অসাধারণ সমাধান!

— জিলানী

[data-toggle="pill"]

— বড়িগুলির

Answer 5

এটি localStorageসক্রিয় ট্যাব সঞ্চয় করতে এইচটিএমএল 5 ব্যবহার করে

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

Comments

এটি দুর্দান্ত, তবে একটি অসুবিধা হ'ল আপনি সক্রিয় ট্যাবের সাথে লিঙ্কগুলি ভাগ করতে সক্ষম হবেন না

— lfender6445

এটি দুর্দান্ত, সুবিধাটি হ'ল সমস্যাটি এমনভাবে প্রবর্তন করে না যেখানে "উইন্ডো.লোকেশন.হ্যাশ" ইউআরএল-তে http র অনুরোধ প্যারামের সাথে হ্যাশ মান যুক্ত করে যা অন্য পোস্টের অনুরোধ যেমন পৃষ্ঠাগুলি ইত্যাদি দ্বারা পড়ে এবং খারাপ পরম পড়ে যায়

— ডাং

Answer 6

জাভি মার্টিনিজ এবং কোপ্পোরের দেওয়া উত্তরের প্রতি নিজেকে বেঁধে আমি এমন একটি সমাধান নিয়ে এসেছি যা উত্তরটির উপলব্ধতার উপর নির্ভর করে ইউআরএল হ্যাশ বা লোকালস্টোরেজ ব্যবহার করে:

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

জাভি মার্টিনিজের সমাধানের ক্ষেত্রে এটি পিছনের বোতামটি রাখে না ।

Answer 7

আমার কোড, এটি আমার পক্ষে কাজ করে, আমি localStorageএইচটিএমএল 5 ব্যবহার করি

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

Answer 8

আমি এই চেষ্টা এবং এটি কাজ করে: (দয়া করে প্রতিস্থাপন এই পিল বা ট্যাবে আপনি ব্যবহার করছেন সঙ্গে)

    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/

Answer 9

ঠিক আছে, এটি ইতিমধ্যে 2018 সালে তবে আমি মনে করি এটি কখনই (টিভি প্রোগ্রামে শিরোনামের মতো) চেয়ে বেশি দেরী হবে ol নীচে আমি আমার থিসিস চলাকালীন তৈরি করেছি 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>

এবং এখানে বুটস্ট্র্যাপ ট্যাবগুলির কোড রয়েছে:

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

বুটস্ট্র্যাপ এবং অন্যান্য মৌলিক জিনিসগুলি কল করতে ভুলবেন না 

আপনার জন্য এখানে দ্রুত কোডগুলি রয়েছে:

<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 কোডটি কেবলমাত্র যখন jQuery .attr () পদ্ধতিটি ব্যবহার করে কোনও নতুন ট্যাব প্রদর্শিত হয় এবং এটি HTML5 লোকালস্টোরেজ অবজেক্টের মাধ্যমে ব্যবহারকারীর ব্রাউজারে স্থানীয়ভাবে সংরক্ষণ করে তখন মূল উপাদানটির href বৈশিষ্ট্যটির মানটি পায়। পরে, ব্যবহারকারী পৃষ্ঠাটি রিফ্রেশ করলে এটি এই ডেটাটি পুনরুদ্ধার করে এবং .tab ('প্রদর্শন') পদ্ধতির মাধ্যমে সম্পর্কিত ট্যাবটি সক্রিয় করে।

কিছু উদাহরণ খুঁজছেন? আপনার ছেলেদের জন্য এখানে একটি .. https://jsfiddle.net/Wineson123/brseabdr/

আমি চাই আমার উত্তরটি আপনার সকলকে সাহায্য করতে পারে .. চেরিও! :)

Answer 10

যেহেতু আমি এখনও মন্তব্য করতে পারছি না আমি উত্তরটি উত্তর থেকে অনুলিপি করেছি, এটি সত্যিই আমাকে সাহায্য করেছে। তবে আমি এটিকে # আইডি এর পরিবর্তে কুকিজের সাথে কাজ করতে পরিবর্তিত করেছি তাই আমি পরিবর্তনগুলি ভাগ করতে চাই। এটি সক্রিয় ট্যাবটি কেবলমাত্র একটি রিফ্রেশ (যেমন একাধিক পুনর্নির্দেশ) এর চেয়ে বেশি সময় বা সংরক্ষণ করতে সক্ষম করে যখন আইডি ইতিমধ্যে ব্যবহৃত হয় এবং আপনি কোপার্স বিভাজন পদ্ধতি প্রয়োগ করতে চান না।

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

Comments

আপডেটের জন্য ধন্যবাদ. বাস্তবে আমি এই জাতীয় রেজোলিউশনের সন্ধান করছিলাম তবে সময়ের চেয়ে আমি কেবলমাত্র @ কপ্পোরের উত্তর পেয়েছি কাজ করে। আসলে আমরা যদি ফিচারটি ব্যবহার করতে চাই তবে সেই দুর্দান্ত উপায়গুলির মধ্যে একটি। আপডেটের জন্য ধন্যবাদ

— কোড প্রেমিকা

Answer 11

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

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

Comments

এটি দুর্দান্ত, তবে একটি অসুবিধা হ'ল আপনি সক্রিয় ট্যাবের সাথে লিঙ্কগুলি ভাগ করতে সক্ষম হবেন না

— lfender6445

Answer 12

ভাগ করে নেওয়ার জন্য ধন্যবাদ.

সব সমাধান পড়ে। আমি এমন একটি সমাধান নিয়ে এসেছি যা নীচের কোড সহ পরবর্তীটির প্রাপ্যতার উপর নির্ভর করে url হ্যাশ বা লোকালস্টোরেজ ব্যবহার করে:

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

Answer 13

বুটস্ট্র্যাপ 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');
})

Answer 14

এইচটিএমএল 5 ব্যবহার করে আমি এটি রান্না করেছি:

পৃষ্ঠায় যেখানে কিছু:

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

ভিউব্যাগে কেবল পৃষ্ঠা / উপাদান যেমন আইডি থাকা উচিত: "টেস্টিং"

আমি একটি সাইট.জেএস তৈরি করেছি এবং পৃষ্ঠায় স্ক্রিপ্টটি যুক্ত করেছি:

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

সমস্ত তথ্য বিশিষ্ট শিলাবৃষ্টি :)

Answer 15

জাভি মার্টিনিজের উত্তর ছাড়াও ক্লিক এ জাম্প এড়ানো

লাফানো এড়ানো

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

Answer 16

আমাদের জন্য স্ক্রিপ্টটি বোতামটিতে চাপ দেওয়ার জন্য আমরা লোড করতে jquery ট্রিগারটি ব্যবহার করেছি

$ ( "Class_name।") ট্রিগার ( 'ক্লিক')।

Answer 17

আফসোস, এটি করার অনেক উপায় আছে। আমি এটি নিয়ে এসেছি, সংক্ষিপ্ত এবং সাধারণ। আশা করি এটি অন্যকে সহায়তা করবে।

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

Answer 18

পৃষ্ঠাটি পুনরায় লোড করার পরে এবং প্রত্যাশিত ট্যাবটি নির্বাচিত হিসাবে রাখার পরে একটি সমাধান রয়েছে।

ধরা যাক ডেটা সংরক্ষণের পরে পুনঃনির্দেশিত ইউআরএলটি হ'ল: আমার_আর্ল # ট্যাব_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');
    }
});

Comments

অ্যাক্টিভ ক্লাসটি স্বয়ংক্রিয়ভাবে অ্যাঙ্কর ট্যাগে নির্ধারিত হয়েছে, এর জন্য এটি $ ('। এনএভি-ট্যাবস এ') দ্বারা সরান remove এই লিপি।

— হাসিব কামাল