টুইটার বুটস্ট্র্যাপ ট্যাব: পৃষ্ঠাটি পুনরায় লোড বা হাইপারলিঙ্কে নির্দিষ্ট ট্যাবে যান

358

আমি একটি ওয়েব পৃষ্ঠা বিকাশ করছি যেখানে আমি টুইটারের বুটস্ট্র্যাপ ফ্রেমওয়ার্ক এবং তাদের বুটস্ট্র্যাপ ট্যাব জেএস ব্যবহার করছি । এটি কয়েকটি ছোটখাটো সমস্যা ব্যতীত দুর্দান্ত কাজ করে, যার একটি হ'ল আমি জানি না কীভাবে কোনও বাহ্যিক লিঙ্ক থেকে কোনও নির্দিষ্ট ট্যাবে সরাসরি যেতে হয়। উদাহরণ স্বরূপ:

<a href="facility.php#home">Home</a>
<a href="facility.php#notes">Notes</a>

বাহ্যিক পৃষ্ঠা থেকে লিঙ্কগুলি ক্লিক করার সময় যথাক্রমে হোম ট্যাব এবং নোটস ট্যাবে যেতে হবে to

— mraliks
সূত্র

49

ইচ্ছে করে এটি নির্মিত হত!

— দামন

5

এই প্রশ্নটি এখানেও উত্থাপিত হয়েছে: github.com/twitter/bootstrap/issues/2415 (এবং এর বেশ কয়েকটি সমাধান রয়েছে)।

— Ztyx

এই আমাকে সাহায্য -> stackoverflow.com/questions/12131273/...

— JGilmartin

1

বুটস্ট্র্যাপ ইস্যুতে হালনাগাদ লিঙ্কটি হ'ল github.com/twbs/bootstrap/issues/2415

— bmihelac

3

প্লাগইন যা এটি স্থির করে: github.com/timabell/jquery.stickytabs

— টিম

603

সমস্যার সমাধানটি এখানে দেওয়া হল, সম্ভবত কিছুটা দেরি। তবে এটি অন্যকে সাহায্য করতে পারে:

// Javascript to enable link to tab
var url = document.location.toString();
if (url.match('#')) {
    $('.nav-tabs a[href="#' + url.split('#')[1] + '"]').tab('show');
} 

// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
    window.location.hash = e.target.hash;
})

— dubbe
সূত্র

83

window.scrollTo(0, 0);উইন্ডো সর্বদা শীর্ষে স্ক্রোল করে তোলে তা নিশ্চিত করতে আমি আরও 1 টি অতিরিক্ত লাইন যুক্ত করব

— ট্রিং ল

1

$ ('। নাভ-ট্যাবগুলি একটি [href * = #' + url.split ('#') [1] + ']')। ট্যাব ('প্রদর্শন'); // একটি * এর সাথে এটি নিরাপদ কারণ এটি অন্যথায় এটি কেবল প্রথম # এর সাথে মেলে ...

— ম্যাট্যাংগ্রিফেল

1

অনলাইনে যা আমার পক্ষে কাজ করেছে: উইন্ডো.লোকেশন.হ্যাশ && $ ('লি এ [href = "' + উইন্ডোজ.লোকেশন.হ্যাশ + '"]')। ট্যাব ('প্রদর্শন')। ট্রিগার ("ক্লিক করুন");

— ডিন মিহান

10

বুটস্ট্র্যাপ 3 এর জন্য এখানে একটি ডেমো রয়েছে: bootply.com/render/VQqzOawoYc#tab2 এবং উত্স কোড

— জিম

2

1.09 থেকে 1.11 আপগ্রেড jQuery পর আমি এই ত্রুটি পাবেন: Syntax error, unrecognized expression: .nav-tabs a[href=#tab-2]। স্ট্যাকওভারফ্লো. com

— জেড।

213

হালনাগাদ

বুটস্ট্র্যাপ 3 এর জন্য, এ পরিবর্তন .on('shown', ...)করুন.on('shown.bs.tab', ....)

এটি @ ডাব্ব জবাবের ভিত্তিতে এবং এই উত্তরের স্বীকৃত উত্তর । এটি window.scrollTo(0,0)সঠিকভাবে কাজ না করে সমস্যাটি পরিচালনা করে । সমস্যাটি হ'ল আপনি যখন দেখানো ট্যাবে ইউআরএল হ্যাশ প্রতিস্থাপন করবেন তখন ব্রাউজারটি সেই হ্যাশটিতে স্ক্রোল করবে যেহেতু পৃষ্ঠায় এটির উপাদান রয়েছে। এটি পেতে, একটি উপসর্গ যুক্ত করুন যাতে হ্যাশ কোনও প্রকৃত পৃষ্ঠার উপাদানটিকে উল্লেখ করে না

// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "tab_";
if (hash) {
    $('.nav-tabs a[href="'+hash.replace(prefix,"")+'"]').tab('show');
} 

// Change hash for page-reload
$('.nav-tabs a').on('shown', function (e) {
    window.location.hash = e.target.hash.replace("#", "#" + prefix);
});

ব্যবহারের উদাহরণ

আপনার যদি আইডি = "মাইটাব" দিয়ে ট্যাব-পেন থাকে তবে আপনার লিঙ্কটি এইভাবে রাখা দরকার:

<a href="yoursite.com/#tab_mytab">Go to Specific Tab </a>

— flynfish
সূত্র

1

নির্দিষ্ট ট্যাবের অধীনে থাকা বুকমার্কগুলিকে রেফারেন্স দেওয়ার সহজ উপায় কি থাকবে? আমার পৃষ্ঠায় আমার পাঁচটি ট্যাব রয়েছে এবং সেগুলির অধীনে আমার বেশ কয়েকটি বুকমার্ক রয়েছে। আমি যা চাই তা হল এই বুকমার্কগুলিকে ট্যাবটির বাইরে থেকে লিঙ্কযোগ্য করে তোলা।

— nize

আপনি যা করার চেষ্টা করছেন তার সাথে যদি আপনি jsfiddle তৈরি করেন তবে @nize @ আমি একবার দেখার চেষ্টা করব।

— ফ্লেনফিশ

1

বুটস্ট্র্যাপ 3 এর জন্য বুটলপি ডেমোটি এখানে রয়েছে: bootply.com/render/VQqzOawoYc#tab2 এবং উত্স কোড

— জিম

উপরের উদাহরণটিতে href- এ ডাবল উদ্ধৃতি নেই। লাইন 5 হওয়া উচিত:$('.nav-tabs a[href="'+hash.replace(prefix,"")+'"]').tab('show');

— পনিবয়

আমার জন্য কাজ করা বাদে আমাকে শেষ ফরোয়ার্ড স্ল্যাশ সরিয়ে ফেলতে হয়েছিল (# এর আগে) 'thyite.com/anotherpage/#tab_mytab' এ অন্যথায় এটি পৃষ্ঠাটি লোডিংয়ের সাথে বিপর্যয় সৃষ্টি করেছিল।

— আলেকজান্ডার

52

আপনি clickসংশ্লিষ্ট ট্যাব লিঙ্কে একটি ইভেন্ট ট্রিগার করতে পারে :

$(document).ready(function(){

  if(window.location.hash != "") {
      $('a[href="' + window.location.hash + '"]').click()
  }

});

— মারিয়ান থেইসেন
সূত্র

ভকভগক! এটি একটি ছোট সমস্যা নিয়ে দুর্দান্ত কাজ করেছে। পৃষ্ঠাটি রিফ্রেশ করে, এটি সঠিক ট্যাবে নেবে না। Ctrl + F5 মারতে হবে। আমি কোডগুলিকে নিম্নলিখিতটিতে সংশোধন করেছি: `$ (নথি)। প্রস্তুত (ফাংশন () {ফাংশন getUrlVars () {var vars = {}; var অংশগুলি = উইন্ডো.লোকেশন। ডেস্ক। ^ = &] +) = ([^ &] *) / জিআই, ফাংশন (এম, কী, মান) ars ওয়ার্স [কী] = মান;}); রিটার্ন ওয়ার্স;} ওয়ার অ্যাকশন = getUrlVars () ["ক্রিয়া" ]; যদি (ক্রিয়া! `

— মিরালিকস

44

এটি ডাবের সমাধানটির উন্নত বাস্তবায়ন যা স্ক্রোলিং প্রতিরোধ করে।

// Javascript to enable link to tab
var url = document.location.toString();
if (url.match('#')) {
    $('.nav-tabs a[href="#'+url.split('#')[1]+'"]').tab('show') ;
} 

// With HTML5 history API, we can easily prevent scrolling!
$('.nav-tabs a').on('shown.bs.tab', function (e) {
    if(history.pushState) {
        history.pushState(null, null, e.target.hash); 
    } else {
        window.location.hash = e.target.hash; //Polyfill for old browsers
    }
})

— ডেমেরিকান সেলিবির
সূত্র

21

প্রদত্ত জাভাস্ক্রিপ্ট সমাধানটি কাজ করতে পারে, আমি কিছুটা ভিন্ন পথে চলেছি যার জন্য অতিরিক্ত কোনও জাভাস্ক্রিপ্টের প্রয়োজন নেই, তবে আপনার দৃষ্টিতে যুক্তি লাগবে না। আপনি একটি আদর্শ URL প্যারামিটার সহ একটি লিঙ্ক তৈরি করেন, যেমন:

<a href = "http://link.to.yourpage?activeTab=home">My Link</a>

তারপরে আপনি যথাযথভাবে 'ক্লাস = "সক্রিয়" লিখতে সক্রিয়ভাবে ট্যাবটির মান সনাক্ত করতে পারেন <li>

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

$activetabhome = (params.activeTab is null or params.activeTab == 'home') ? 'class="active"' : '';
$activetabprofile = (params.activeTab == 'profile') ? 'class="active"' : '';

<li $activetabhome><a href="#home">Home</a></li>
<li $activetabprofile><a href="#profile">Profile</a></li>

— পিটার
সূত্র

আমি আপনার সাধারণ সমাধানটি জেএস দ্রষ্ট্রে পছন্দ করি কারণ একটি সাধারণ কারণ হ'ল জেএস লোকেশন.হ্যাশ আইডিতে লাফিয়ে যায় যার ফলে কার্সারের অবস্থান উপরে এবং নীচে যায়।

— ট্রুং ল

আমি এই সমাধান পছন্দ। প্রকৃতপক্ষে, আমি ট্যাবগুলির জন্য নতুন রুট তৈরি করেছি এবং সেই অনুযায়ী সক্রিয় ক্লাস সেট করে পুনরায় উত্পন্ন ভিউ তৈরি করেছি। এটি পৃষ্ঠার আকার পরিবর্তন, ইউআরএল হ্যাশ এবং পৃষ্ঠা একসাথে স্ক্রোলিং এড়ানো।

— বিজয় মীনা

10

আমি যদি এর বড় ভক্ত নই ... অন্যথায়; তাই আমি একটি সহজ পদ্ধতির গ্রহণ করেছি।

$(document).ready(function(event) {
    $('ul.nav.nav-tabs a:first').tab('show'); // Select first tab
    $('ul.nav.nav-tabs a[href="'+ window.location.hash+ '"]').tab('show'); // Select tab by name if provided in location hash
    $('ul.nav.nav-tabs a[data-toggle="tab"]').on('shown', function (event) {    // Update the location hash to current tab
        window.location.hash= event.target.hash;
    })
});

একটি ডিফল্ট ট্যাব চয়ন করুন (সাধারণত প্রথম)
ট্যাবে স্যুইচ করুন (যদি এই জাতীয় উপাদান প্রকৃতপক্ষে উপস্থিত থাকে; jQuery এটি পরিচালনা করুক); কোনও ভুল হ্যাশ নির্দিষ্ট করা থাকলে কিছুই হয় না
[Ptionচ্ছিক] অন্য ট্যাব ম্যানুয়ালি চয়ন করা থাকলে হ্যাশ আপডেট করুন

অনুরোধ করা হ্যাশটিতে স্ক্রোলিংয়ের ঠিকানা দেয় না; কিন্তু এটা করা উচিত ?

— visitsb
সূত্র

10

বুটস্ট্র্যাপ 3 এর জন্য:

$('.nav-tabs a[href="#' + tabID + '"]').tab('show');

https://jsfiddle.net/DTcHh/6638/

— রাজন পল
সূত্র

8

এটি বুটস্ট্র্যাপ 3-এ কাজ করে এবং গার্সিয়া ওয়েবেডেভের উত্তরকেও সংহত করে ডাব এবং ফ্লাইনফিশের 2 শীর্ষ উত্তরের উন্নতি করে (যা হ্যাশের পরে url পরামিতিগুলির জন্য অনুমতি দেয় এবং গিথুব ইস্যু ট্র্যাকারের বুটস্ট্র্যাপ লেখকগণের থেকে সরাসরি):

// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "tab_";

if (hash) {
    hash = hash.replace(prefix,'');
    var hashPieces = hash.split('?');
    activeTab = $('.nav-tabs a[href=' + hashPieces[0] + ']');
    activeTab && activeTab.tab('show');
} 

// Change hash for page-reload
$('.nav-tabs a').on('shown', function (e) {
    window.location.hash = e.target.hash.replace("#", "#" + prefix);
});

— greggdavis
সূত্র

1

এটি বুটস্ট্র্যাপ 3 তে কাজ করে না, ডক্স অনুযায়ী 'shown'হওয়া উচিত 'shown.bs.tab': getbootstrap.com/ javascript / #tabs-events । আমি কেন বিস্মিত হয়েছি কিন্তু যখন আমি আপনার পোস্ট সম্পাদনা করার চেষ্টা করেছি তখন তা প্রত্যাখ্যানিত হয়ে গেছে ...

— YPCrumble

6

এই কোডটি # হ্যাশের উপর নির্ভর করে ডান ট্যাবটি নির্বাচন করে এবং একটি ট্যাব ক্লিক করা হলে ডান # হ্যাশ যুক্ত করে। (এটি jquery ব্যবহার করে)

কফিস্ক্রিপ্টে:

$(document).ready ->
    if location.hash != ''
        $('a[href="'+location.hash+'"]').tab('show')

    $('a[data-toggle="tab"]').on 'shown', (e) ->
        location.hash = $(e.target).attr('href').substr(1)

বা জেএসে:

$(document).ready(function() {
    if (location.hash !== '') $('a[href="' + location.hash + '"]').tab('show');
    return $('a[data-toggle="tab"]').on('shown', function(e) {
      return location.hash = $(e.target).attr('href').substr(1);
    });
});

— Sucrenoir
সূত্র

jquery লোড হওয়ার পরে এটি অবশ্যই রাখবেন তা নিশ্চিত করুন। আমি এটি একটি পৃষ্ঠার মাঝখানে রাখছিলাম (এটি পরীক্ষার জন্য এটি sertোকানোর জন্য সহজ জায়গা ছিল) এবং এটি কার্যকর হয়নি। আমি jquery লোড করার পরে এটি রাখা দুর্দান্ত কাজ করে।

— রন

6

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

<script type="text/javascript">
    $(function() {
        openTabHash(); // for the initial page load
        window.addEventListener("hashchange", openTabHash, false); // for later changes to url
    });


    function openTabHash()
    {
        console.log('openTabHash');
        // Javascript to enable link to tab
        var url = document.location.toString();
        if (url.match('#')) {
            $('.nav-tabs a[href="#'+url.split('#')[1]+'"]').tab('show') ;
        } 

        // With HTML5 history API, we can easily prevent scrolling!
        $('.nav-tabs a').on('shown.bs.tab', function (e) {
            if(history.pushState) {
                history.pushState(null, null, e.target.hash); 
            } else {
                window.location.hash = e.target.hash; //Polyfill for old browsers
            }
        })
    }
</script>

— গেভিন
সূত্র

5

$(function(){
  var hash = window.location.hash;
  hash && $('ul.nav a[href="' + hash + '"]').tab('show');
});

Http://github.com/twitter/bootstrap/issues/2415#issuecomment-4450768 এর এই কোডটি আমার পক্ষে নিখুঁতভাবে কাজ করেছে।

— tomaszbak
সূত্র

5

@ ফ্লাইনফিশ + @ জাইটিএক্স সমাধান যা আমি নেস্টেড ট্যাবগুলির জন্য ব্যবহার করি:

    handleTabLinks();

    function handleTabLinks() {
        if(window.location.hash == '') {
            window.location.hash = window.location.hash + '#_';
        }
        var hash = window.location.hash.split('#')[1];
        var prefix = '_';
        var hpieces = hash.split('/');
        for (var i=0;i<hpieces.length;i++) {
            var domelid = hpieces[i].replace(prefix,'');
            var domitem = $('a[href=#' + domelid + '][data-toggle=tab]');
            if (domitem.length > 0) {
                domitem.tab('show');
            }
        }
        $('a[data-toggle=tab]').on('shown', function (e) {
            if ($(this).hasClass('nested')) {
                var nested = window.location.hash.split('/');
                window.location.hash = nested[0] + '/' + e.target.hash.split('#')[1];
            } else {
                window.location.hash = e.target.hash.replace('#', '#' + prefix);
            }
        });
    }

শিশুদের ক্লাস = "নেস্টেড" হওয়া উচিত

— আর্টেম কাশিন
সূত্র

5

আমি একটি সমাধান নিয়ে এসেছি যা নীচের কোড সহ পরবর্তীটির উপলভ্যতার উপর নির্ভর করে 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');
    }
});

— বৈভব
সূত্র

4

আমি আপনাকে পরামর্শ দেব যে আপনি গিটহাবের ইস্যু ট্র্যাকারে বুটস্ট্র্যাপ লেখকদের দেওয়া কোডটি ব্যবহার করুন :

var hash = location.hash
  , hashPieces = hash.split('?')
  , activeTab = $('[href=' + hashPieces[0] + ']');
activeTab && activeTab.tab('show');

তারা কেন এটি সমর্থন করতে পছন্দ করেনি সে সম্পর্কে আরও তথ্যের লিঙ্কে আপনি জানতে পারেন।

— আলেজান্দ্রো গার্সিয়া ইগলেসিয়াস
সূত্র

4

উপরোক্ত আলোচিত কয়েকটি পদ্ধতির চেষ্টা করুন এবং নিম্নলিখিত কার্যনির্বাহী সমাধানটি শেষ করুন, চেষ্টা করার জন্য কেবল আপনার সম্পাদককে অনুলিপি করুন এবং আটকান। হ্যাশটিকে ইনবক্স, আউটবক্স, ইউআরএলটিতে রচনা করুন এবং এন্টার কী চাপুন test

<html>
    <head>
        <link type='text/css' rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css' />
        <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container body-content">
            <ul class="nav nav-tabs">
                <li class="active"><a data-toggle="tab" href="#inbox">Inbox</a></li>
                <li><a data-toggle="tab" href="#outbox">Outbox</a></li>
                <li><a data-toggle="tab" href="#compose">Compose</a></li>
            </ul>
            <div class="tab-content">
                <div id="inbox" class="tab-pane fade in active">
                    Inbox Content
                </div>
                <div id="outbox" class="tab-pane fade">
                    Outbox Content
                </div>
                <div id="compose" class="tab-pane fade">
                    Compose Content
                </div>
            </div>
        </div>
        <script>
            $(function () {
                var hash = window.location.hash;
                hash && $('ul.nav a[href="' + hash + '"]').tab('show');
            });
        </script>
    </body>
</html>

আশা করি এটি আপনার সময় সাশ্রয় করবে।

— অভিমন্যু
সূত্র

3

এখানে আমি যা করেছি, তা খুব সহজ এবং আপনার ট্যাব লিঙ্কগুলির সাথে একটি আইডি যুক্ত রয়েছে যা আপনি href বৈশিষ্ট্যটি পেতে পারেন এবং ট্যাব সামগ্রীগুলি দেখায় এমন ফাংশনটিতে এটি দিতে পারেন:

<script type="text/javascript">
        jQuery(document).ready(function() {
            var hash = document.location.hash;
            var prefix = "tab_";
            if (hash) {
                var tab = jQuery(hash.replace(prefix,"")).attr('href');
                jQuery('.nav-tabs a[href='+tab+']').tab('show');
            }
        });
        </script>

তারপরে আপনার ইউআরএলটিতে আপনি হ্যাশটিকে এমন কিছু হিসাবে যুক্ত করতে পারেন: # ট্যাব_ট্যাব 1, 'ট্যাব_' অংশটি হ্যাশ থেকেই সরিয়ে ফেলা হয় তাই এনএভি-ট্যাবগুলিতে প্রকৃত ট্যাব লিঙ্কের আইডি (ট্যাবডি 1) এর পরে স্থাপন করা হয়, তাই আপনার ইউআরএল কিছু দেখতে পাবেন: www.mydomain.com/index.php#tab_tabid1।

এটি আমার জন্য নিখুঁত কাজ করে এবং আশা করে এটি অন্য কাউকে সহায়তা করে :-)

— ডেরেক বুন্টিন
সূত্র

2

নেস্টেড ট্যাবগুলি হ্যান্ডেল করার জন্য এটি আমার সমাধান। সক্রিয় ট্যাবে সক্রিয় হওয়ার জন্য কোনও প্যারেন্ট ট্যাব রয়েছে কিনা তা খতিয়ে দেখতে আমি একটি ফাংশন যুক্ত করেছি। এটি ফাংশন:

function activateParentTab(tab) {
    $('.tab-pane').each(function() {
        var cur_tab = $(this);
        if ( $(this).find('#' + tab).length > 0 ) {
            $('.nav-tabs a[href=#'+ cur_tab.attr('id') +']').tab('show');
            return false;
        }
    });
}

এবং এটিকে বলা যেতে পারে (@ ফ্লাইনফিশের সমাধানের ভিত্তিতে):

var hash = document.location.hash;
var prefix = "";
if (hash) {
    $('.nav-tabs a[href='+hash.replace(prefix,"")+']').tab('show');
    activateParentTab(hash);
} 

// Change hash for page-reload
$('.nav-tabs a').on('shown', function (e) {
    window.location.hash = e.target.hash.replace("#", "#" + prefix);
});

এই সমাধানটি এই মুহূর্তে আমার কাছে বেশ সূক্ষ্ম কাজ করে। আশা করি এটি অন্য কারও পক্ষে কার্যকর হতে পারে;)

— স্টেফানো মাররা
সূত্র

2

আমার জন্য কাজ করার জন্য আমাকে কিছু বিট সংশোধন করতে হয়েছিল। আমি বুটস্ট্র্যাপ 3 এবং jQuery 2 ব্যবহার করছি

// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "!";
if (hash) {
    hash = hash.replace(prefix,'');
    var hashPieces = hash.split('?');
    activeTab = $('[role="tablist"] a[href=' + hashPieces[0] + ']');
    activeTab && activeTab.tab('show');
}

// Change hash for page-reload
$('[role="tablist"] a').on('shown.bs.tab', function (e) {
    window.location.hash = e.target.hash.replace("#", "#" + prefix);
});

— ruifn
সূত্র

দুর্দান্ত উত্তর, বাদে আমাকে "!" "ট্যাব_" সহ উপসর্গ অন্যথায় নিখুঁতভাবে কাজ।

— কোজিজ

2

আপনার পৃষ্ঠায় এই কোডটি সন্নিবেশ করান:

$(function(){
  var hash = window.location.hash;
  hash && $('ul.nav a[href="' + hash + '"]').tab('show');

  $('.nav-tabs a').click(function (e) {
    $(this).tab('show');
    var scrollmem = $('body').scrollTop();
    window.location.hash = this.hash;
    $('html,body').scrollTop(scrollmem);
  });
});

স্নিপেট প্রসারিত করুন

— আমিন গোলিবিগিয়ান
সূত্র

1

আমার কেবল এই সমস্যাটি ছিল, তবে একাধিক ট্যাব স্তর পরিচালনা করতে হবে। কোডটি বরং কুরুচিপূর্ণ (মন্তব্য দেখুন), তবে এটির কাজটি করেছে: https://gist.github.com/JensRantil/4721860 আশা করি অন্য কেউ এটি দরকারী পাবেন (এবং আরও ভাল সমাধান প্রস্তাব দেওয়ার জন্য নির্দ্বিধায়!)

— Ztyx
সূত্র

1

অন্যান্য উত্তর থেকে পিসগুলি একত্রিত করা, এখানে একটি সমাধান রয়েছে যা নীড়যুক্ত ট্যাবগুলির অনেকগুলি স্তর খুলতে পারে:

// opens all tabs down to the specified tab
var hash = location.hash.split('?')[0];
if(hash) {
  var $link = $('[href=' + hash + ']');
  var parents = $link.parents('.tab-pane').get();
  $(parents.reverse()).each(function() {
    $('[href=#' + this.id + ']').tab('show') ;
  });
  $link.tab('show');
}

— cweston
সূত্র

বাসা বাঁধার মাত্র 2 স্তরে কাজ করে, 3 য় স্তর সমস্যার কারণ হয়।

— নিকোলাস হ্যামিল্টন

আমি এটি মাত্র তিন স্তরের ট্যাবগুলির বিপরীতে পরীক্ষা করেছি এবং এটি আমার জন্য কাজ করে বলে মনে হচ্ছে। আপনি কি নিশ্চিত যে এটি আপনার বাস্তবায়নে কোনও সমস্যা নয়? আপনি কোন "সমস্যা" অনুভব করছেন?

— Cweston

1 ম স্তরের এবং 2 য় স্তরের যে কোনও ট্যাব সূক্ষ্মভাবে কাজ করে, তবে তৃতীয় স্তরে, পৃষ্ঠাটি রিফ্রেশ করার সময় (বা ফর্মটি জমা দেওয়ার সময়) যখন পৃষ্ঠাটি আবার খোলে, তখন এটি দ্বিতীয় স্তরের প্রথম ট্যাবে ফোকাস দেওয়া হয়।

— নিকোলাস হ্যামিল্টন

সুতরাং এটি ঠিকঠাকভাবে কাজ করতে পেল (আমার কোডটিতে একটি ছোটখাটো টাইপও ছিল) তবে টাইপো সংশোধনের পরে কেবল $('.nav-tabs li a').click( function(e) { history.pushState( null, null, $(this).attr('href') );});আপনার কোডের উপরে জাভাস্ক্রিপ্ট রয়েছে।

— নিকোলাস হ্যামিল্টন

1

যদি এটি কারও কাছে গুরুত্বপূর্ণ হয় তবে URL থেকে একক হ্যাশ মূল্য পেতে এবং এটি দেখানোর জন্য নিম্নলিখিত কোডটি ছোট এবং ত্রুটিহীনভাবে কাজ করে:

<script>
    window.onload = function () {
        let url = document.location.toString();
        let splitHash = url.split("#");
        document.getElementById(splitHash[1]).click();
    };
</script>

এটি কী করে তা হ'ল এটি আইডিটি পুনরুদ্ধার করে এবং ক্লিক ইভেন্টটিকে ছড়িয়ে দেয়। সহজ।

— স্যাম
সূত্র

0

আমি আজাক্সের সাথে লিঙ্কগুলির জন্য এই জাতীয় অবস্থান তৈরি করেছি #!#(উদাঃ / টেস্ট ডটকম #! # টেস্ট3) তবে আপনি যা চান তা এটি পরিবর্তন করতে পারেন

$(document).ready(function() {

       let hash = document.location.hash;
       let prefix = "!#";

       //change hash url on page reload
       if (hash) {
         $('.nav-tabs a[href=\"'+hash.replace(prefix,"")+'\"]').tab('show');
       } 

       // change hash url on switch tab
       $('.nav-tabs a').on('shown.bs.tab', function (e) {
          window.location.hash = e.target.hash.replace("#", "#" + prefix);
       });
 });

এখানে গিথুবের সরল পৃষ্ঠা সহ উদাহরণ

— eudaimonia
সূত্র

0

আমি জানি যে এই থ্রেডটি অনেক পুরানো, তবে আমি এখানে আমার নিজস্ব প্রয়োগটি ছেড়ে দেব:

$(function () {
  // some initialization code

  addTabBehavior()
})

// Initialize events and change tab on first page load.
function addTabBehavior() {
  $('.nav-tabs a').on('show.bs.tab', e => {
    window.location.hash = e.target.hash.replace('nav-', '')
  })

  $(window).on('popstate', e => {
    changeTab()
  })

  changeTab()
}

// Change the current tab and URL hash; if don't have any hash
// in URL, so activate the first tab and update the URL hash.
function changeTab() {
  const hash = getUrlHash()

  if (hash) {
    $(`.nav-tabs a[href="#nav-${hash}"]`).tab('show')
  } else {
    $('.nav-tabs a').first().tab('show')
  }
}

// Get the hash from URL. Ex: www.example.com/#tab1
function getUrlHash() {
  return window.location.hash.slice(1)
}

মনে রাখবেন যে nav-লিঙ্কগুলি নেভ করার জন্য আমি একটি শ্রেণির উপসর্গ ব্যবহার করছি ।

— রেনান কোয়েলহো
সূত্র