টুইটার বুটস্ট্র্যাপ - ট্যাবস - ইউআরএল পরিবর্তন হয় না

Question

আমি টুইটার বুটস্ট্র্যাপ এবং এর "ট্যাব" ব্যবহার করছি।

আমার কাছে নিম্নলিখিত কোড রয়েছে:

<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#add">add</a></li>
    <li><a data-toggle="tab" href="#edit" >edit</a></li>
    <li><a data-toggle="tab" href="#delete" >delete</a></li>
</ul>

ট্যাবগুলি সঠিকভাবে কাজ করে তবে URL এ # যুক্ত, # সম্পাদনা, # মুছে ফেলা হয় না।

আমি যখন data-toggleইউআরএল পরিবর্তনগুলি সরান , তবে ট্যাবগুলি কার্যকর হয় না।

এর কোন সমাধান?

Comments

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

— টিম

এই যেমন একটি অনুরূপ প্রশ্ন হল stackoverflow.com/q/18999501/873282

— koppor

Answer 1

এই কোড ব্যবহার করে দেখুন। এটি url + এ ট্যাব href যুক্ত করে পৃষ্ঠা লোডে হ্যাশের উপর ভিত্তি করে ট্যাব খোলে:

$(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() || $('html').scrollTop();
    window.location.hash = this.hash;
    $('html,body').scrollTop(scrollmem);
  });
});

Comments

এটা খুব সুন্দর কাজ। +1 টি। তবে নির্বাচক থেকে "হ্যাশ অ্যান্ড অ্যান্ড $ .." এর কারণ কী তা প্রদর্শন ট্যাব, তবে "হ্যাশ অ্যান্ড অ্যান্ড" এর অর্থ কী। ধন্যবাদ

— রিচার্ডেল

&&এর অর্থ ANDযদি এর বামটি যদি সমান হয় ( hash0, নাল বা ফাঁকা নয়) এবং ডানটি সত্যের সাথে সমান হয় তবে কিছু করুন, তবে লাইনটি শেষ হয়ে গেছে ;তাই আগে করার মতো কিছুই ;নেই এবং এটি যদি কোনও ব্যাপার না তবে ট্যাব প্রদর্শিত বা না দেখানো হয়েছে এবং কী কী .tab('show')রিটার্ন দেয় তা বিবেচনা করে না , এটি এখনও চেষ্টা করবে। যুক্তিটি এইভাবে মূল্যায়ন করার সময়, সমীকরণের প্রথম অংশটি যদি (পূর্বে &&) মিথ্যা হয় তবে মূল্যায়ন চালিয়ে যাওয়ার দরকার নেই, তাই ট্যাবটি প্রদর্শিত হবে না। আপনি একই প্রভাব অর্জন করতে পারেন:if(hash){ $('ul.nav a[href="' + hash + '"]').tab('show'); }

— vahanpwns

টিএল; ডিআর: a && b;মানে চেষ্টা করুন aএবং তারপরে যদি সত্য হয় তবে চেষ্টা করুন b। স্ট্রিংগুলি খালি না হলে সত্য।

— vahanpwns

আমি কীভাবে এটি তৈরি করব যাতে আমি "#" ইউআরএল ব্যবহার করার সময় এটি পৃষ্ঠায় শীর্ষে পুনরায় লোড করি? এই মুহূর্তে এটি নীচে স্ক্রল করে যেখানে ট্যাবগুলি শুরু হয়। আমি ঠিক আসল পৃষ্ঠায় শীর্ষে স্ক্রোল করতে চাই

— কিবায়েক

ঠিকঠাক কাজ করে তবে "$ ('। এনভ-ট্যাবস এ') প্রতিস্থাপন করতে হয়েছিল।" "by ('# নভট্যাবস এ' দ্বারা)" ক্লিক করুন ("দেখানো বিবিএস.ট্যাবস," বুটস্ট্র্যাপ 3

— জিজিরকিনিয়াম

Answer 2

সম্পূর্ণ সমাধানের জন্য প্রয়োজনীয় তিনটি উপাদান রয়েছে:

1. URL টিতে একটি হ্যাশ থাকলে পৃষ্ঠাটি লোড করা হলে সঠিক ট্যাবটি দেখান।
2. ট্যাব পরিবর্তন করা হলে URL এ হ্যাশ পরিবর্তন করা।
3. ইউআরএল (পিছনে / ফরোয়ার্ড বোতাম) এ হ্যাশ পরিবর্তিত হলে ট্যাবটি পরিবর্তন করুন এবং নিশ্চিত করুন যে প্রথম ট্যাবটি সঠিকভাবে সাইকেল করা হয়েছে।

আমি মনে করি না এখানে কোনও মন্তব্য, না গৃহীত উত্তর, এই সমস্ত পরিস্থিতিতে পরিচালনা করে।

কিছুটা জড়িত থাকায়, আমি মনে করি এটি একটি ছোট jQuery প্লাগইন হিসাবে নেটেস্ট: https://github.com/aidanlister/jquery-stickytabs

আপনি প্লাগইনটিকে এভাবে কল করতে পারেন:

$('.nav-tabs').stickyTabs();

আমি এর জন্য একটি ব্লগ পোস্ট করেছি, http://aidanlister.com/2014/03/persisting-the-tab-state-in-bootstrap/

Comments

আমি এটির নিজস্ব গিট রেপো দিয়েছি : github.com/timabell/jquery.stickytabs - প্লাগইনটির জন্য অনেক ধন্যবাদ, একটি ট্রিট কাজ করে।

— টিম আবেল

এটি সমাধানের জন্য +1 হিসাবে এটি পিছনে / পরবর্তী ব্রাউজিংয়েও কাজ করে যা @ টমাসব্যাকের সমাধানটি করে না। ধন্যবাদ!

— বিটফিডেট

এটি দুর্দান্ত এবং ভালভাবে কাজ করে তবে আমি যখন ইউআরএলটিতে হ্যাশ দিয়ে পৃষ্ঠাটি লোড করি না তখন তা নয়। এটি ভুল কিছু করেছি বলে নিশ্চিত হওয়ার জন্য প্রায় খনন চালিয়ে যাবে (খুব সম্ভবত)। তবে, আমি এটিকে একটি +1 দিতে যাচ্ছি

— ম্যাটবুথডেভ

Answer 3

ব্যবহার data-toggle="tab" জিজ্ঞেস প্লাগইন ট্যাব, যা যখন করছেন এটা কল হ্যান্ডেল করতে preventDefaultইভেন্টটি (উপর GitHub কোডটি )।

আপনি নিজের ট্যাব অ্যাক্টিভেশন ব্যবহার করতে পারেন, এবং ইভেন্টটি যেতে দিন:

$('.nav-tabs a').click(function (e) {
    // No e.preventDefault() here
    $(this).tab('show');
});

এবং আপনাকে অবশ্যই গুনটি সরিয়ে ফেলতে হবে data-toggle="tab"

আপনার সন্দেহ থাকলে ডকটি পরীক্ষা করুন ।

Answer 4

আপনার নোঙ্গর উপাদানগুলি ইতিমধ্যে ইউআরএল হ্যাশ পরিবর্তন করার কারণে , অনাহাশিচ অনুষ্ঠান শোনার জন্য আরও একটি ভাল বিকল্প। @ ফ্লোরি যেমন ইতিমধ্যে উল্লেখ করেছে, ব্রাউজারের ব্যাক বোতামের সাথে এই পদ্ধতিটি দুর্দান্ত কাজ করে।

var tabs$ = $(".nav-tabs a");

$( window ).on("hashchange", function() {
    var hash = window.location.hash, // get current hash
        menu_item$ = tabs$.filter('[href="' + hash + '"]'); // get the menu element

    menu_item$.tab("show"); // call bootstrap to show the tab
}).trigger("hashchange");

অবশেষে, শ্রোতার সংজ্ঞা দেওয়ার ঠিক পরে ইভেন্টটি ট্রিগার করা পৃষ্ঠা লোডে ডান ট্যাবটি প্রদর্শন করতে সহায়তা করবে।

Answer 5

আপনার সমস্যার আমার সমাধান:

প্রথমে data-valueপ্রতিটি aলিঙ্কে নতুন বৈশিষ্ট্য যুক্ত করুন :

<ul class="nav nav-tabs">
    <li class="active">
        <a data-toggle="tab" href="#tab-add" data-value="#add">add</a>
    </li>
    <li>
        <a data-toggle="tab" href="#tab-edit" data-value="#edit">edit</a>
    </li>
    <li>
        <a data-toggle="tab" href="#tab-delete" data-value="#delete">delete</a>
    </li>
</ul>

দ্বিতীয়ত, ট্যাব, থেকে যেমন পরিবর্তনের আইডি addথেকে tab-addএছাড়াও আপডেট hrefs অন্তর্ভুক্ত করা, tab-উপসর্গ:

<div class="tab-content">
    <div class="tab-pane" id="tab-add">Add panel</div>
    <div class="tab-pane" id="tab-edit">Edit panel</div>
    <div class="tab-pane" id="tab-delete">Panel panel</div>
</div>

এবং অবশেষে জেএস কোড:

<script type="text/javascript">
    $(function () {
        var navTabs = $('.nav-tabs a');
        var hash = window.location.hash;
        hash && navTabs.filter('[data-value="' + hash + '"]').tab('show');

        navTabs.on('shown', function (e) {
            var newhash = $(e.target).attr('data-value');
            window.location.hash = newhash;
        });
    })
</script>

এখানে jsFiddle - তবে jsFizz দ্বারা ব্যবহৃত iframe এর কারণে এটি কাজ করে না, তবে আপনি আমার সমাধানের উত্স পড়তে পারেন।

Answer 6

বুটস্ট্র্যাপ 3 টি ট্যাব সহ কেকপিএইচপি একই সমস্যা, এবং আমি যখন বাহ্যিক ইউআরএল এবং অ্যাঙ্কর দিয়ে প্রেরণ করি তখন এটি আমার মেনুটি হারানো বিভাগে লাফিয়ে যায়, পর্যালোচনা করার পরে অনেকগুলি সমাধান এটি তৈরি করে ...

ধন্যবাদ: http://ck.kennt-wayne.de/2012/dec/twitter-bootstrap-how-to-fix-tabs

$(document).ready(function()
 {  
//Redirecciona al tab, usando un prefijo al cargar por primera vez, al usar redirect en cake #_Pagos    
//Redirecciona al tab, usando #Pagos
/* Automagically jump on good tab based on anchor; for page reloads or links */
 if(location.hash) 
  {
     $('a[href=' + location.hash + ']').tab('show');         
  }


//Para evitar el bajar al nivel del tab, (al mostrarse el tab subimos)
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) 
{
    location.hash = $(e.target).attr('href').substr(1);
    scrollTo(0,0);      
});



//Actualiza el URL con el anchor o ancla del tab al darle clic
 /* Update hash based on tab, basically restores browser default behavior to
 fix bootstrap tabs */
$(document.body).on("click", "a[data-toggle]", function(event) 
  {
    location.hash = this.getAttribute("href");
  });


//Redirecciona al tab, al usar los botones de regresar y avanzar del navegador.
/* on history back activate the tab of the location hash if exists or the default tab if no hash exists */   
$(window).on('popstate', function() 
{
  //Si se accesa al menu, se regresa al tab del perfil (activo default), fixed conflict with menu
  //var anchor = location.hash || $("a[data-toggle=tab]").first().attr("href");
  var anchor = location.hash;
  $('a[href=' + anchor + ']').tab('show');

});   

});//Fin OnReady

Answer 7

হ্যাশ পরিবর্তনের উপর প্রতিক্রিয়া জানানোর একটি সহজ উপায়ও রয়েছে (উদাঃ ব্যাক বোতাম)। টমাসব্যাক সলিউশনে কেবল একটি হ্যাশচেঞ্জ ইভেন্ট শ্রোতা যুক্ত করুন:

$(function(){
  // Change tab on load
  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);
  });

  // Change tab on hashchange
  window.addEventListener('hashchange', function() {
    var changedHash = window.location.hash;
    changedHash && $('ul.nav a[href="' + changedHash + '"]').tab('show');
  }, false);
});

Answer 8

আমি বুটস্ট্র্যাপ ৩.৩ ব্যবহার করছি। * উপরোক্ত সমাধানগুলির কোনওটিই আমাকে সহায়তা করেনি, এমনকি উত্তরটি হিসাবে চিহ্নিতও হয়েছে। আমি সবে স্ক্রিপ্টের নিচে যুক্ত করেছি এবং কাজ করেছি।

$(function(){
    var hash = document.location.hash;
    if (hash) {
       $('.navbar-nav a[href="' + hash + '"]').tab('show');
    }
    $('a[data-toggle="tab"]').on('click', function (e) {
       history.pushState(null, null, $(this).attr('href'));
    });
});

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

Answer 9

সর্বাধিক সহজ, ধরে নিচ্ছেন আপনি এখানেdata-toggle="tab" বর্ণিত ডকুমেন্টেড সিনট্যাক্সটি ব্যবহার করছেন :

$(document).on('shown.bs.tab', function(event) {
  window.location.hash = $(event.target).attr('href');
});

Comments

এই URL টি পরিবর্তন করুন তবে নির্দিষ্ট ট্যাব খোলার জন্য কোনও লিঙ্কে ক্লিক করার পরে সেখানে যেতে পারবেন না

— খ্রিস্ট

Answer 10

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

<%= form_for @foo, url: foo_path(@foo, anchor: dom_id(foo)) do |f| %>
# Or
<%= link_to 'Foo', foo_path(@foo, anchor: dom_id(foo)) %>

আপনি যদি উইন্ডোটিকে আইডিতে জাম্প দেওয়া থেকে বিরত রাখতে একটি উপসর্গ ব্যবহার করেন:

<%= form_for @foo, url: foo_path(@foo, anchor: "bar_#{dom_id(foo)}") do |f| %>

তারপরে আপনি কফিস্ক্রিপ্ট:

  hash = document.location.hash
  prefix = 'bar_'
  $('.nav-tabs a[href=' + hash.replace(prefix, '') + ']').tab 'show' if hash
  $('.nav-tabs a').on 'shown.bs.tab', (e) ->
    window.location.hash = e.target.hash.replace '#', '#' + prefix

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

var hash, prefix;

hash = document.location.hash;
prefix = 'bar_';

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

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

এটি বুটস্ট্র্যাপ 3 এ কাজ করা উচিত।

Answer 11

ধন্যবাদ টমাসজবাককেআসল সমাধানের জন্য যদিও আমার সম্পাদনাগুলি প্রত্যাখ্যান হয়ে গেছে এবং আমি তার পোস্টে মন্তব্য করতে পারিনি তবে আমি আমার সামান্য উন্নত এবং আরও পাঠযোগ্য সংস্করণটি এখানে ছেড়ে দেব will

এটি মূলত একই জিনিসটি করে তবে ক্রস ব্রাউজারের সামঞ্জস্যতার সমস্যাটি যদি ঠিক করে তবে তার সাথে আমার ছিল।

$(document).ready(function(){
   // go to hash on window load
   var hash = window.location.hash;
   if (hash) {
       $('ul.nav a[href="' + hash + '"]').tab('show');
   }
   // change hash on click
   $('.nav-tabs a').click(function (e) {
       $(this).tab('show');
       if($('html').scrollTop()){
           var scrollmem = $('html').scrollTop(); // get scrollbar position (firefox)
       }else{
           var scrollmem = $('body').scrollTop(); // get scrollbar position (chrome)
       }
       window.location.hash = this.hash;
       $('html,body').scrollTop(scrollmem); // set scrollbar position
   });
});

Comments

প্রত্যাখ্যান করা আমার পক্ষে কাজ করছে না (সম্ভবত এটি কেবল ফায়ারফক্স সংস্করণ ছিল)। যাইহোক, আমি var স্ক্রোলেম = $ ('বডি') এ পরিবর্তন করেছি sc স্ক্রোলটপ () || $ ( 'HTML') scrollTop ()। ধন্যবাদ!

— tomaszbak

হ্যাঁ. আপনি যে মুহুর্তে বলেছিলেন সে সম্পর্কে আমাকে বলুন যে আমি বুঝতে পেরেছিলাম যে এটি একটি ব্রাউজারের জিনিস যা দ্রুত তা নিশ্চিত করার জন্য ক্রোমে যায়। আমি অবশ্যই আশা করি পর্যালোচনাগুলি সম্পাদনা করার বিষয়ে মন্তব্য করার কোনও উপায় ছিল।

— ফুসি

Answer 12

এখানে এমন একটি বিকল্প ব্যবহার করা হচ্ছে history.pushStateযাতে আপনি আগের ট্যাবে ফিরে যেতে আপনার ব্রাউজারের ইতিহাসটি ব্যবহার করতে পারেন

  $(document).ready(function() {
  // add a hash to the URL when the user clicks on a tab
  $('a[data-toggle="tab"]').on('click', function(e) {
    history.pushState(null, null, $(this).attr('href'));
  });
  // navigate to a tab when the history changes
  window.addEventListener("popstate", function(e) {
    var activeTab = $('[href=' + location.hash + ']');
    if (activeTab.length) {
      activeTab.tab('show');
    } else {
      $('.nav-tabs a:first').tab('show');
    }
  });
});

Answer 13

উপরের কোনওটিই আমার পক্ষে কাজ করেনি, তাই আমি কীভাবে আমার কাজ করলাম তা এখানে আমার:

1. class="tab-link"এই কার্যকারিতাটির প্রয়োজন সমস্ত লিঙ্কে যুক্ত করুন
2. আপনার জাভাস্ক্রিপ্টে নিম্নলিখিত কোড যুক্ত করুন:

    window.addEventListener
    (
        'Popstate',
        ফাংশন (ইভেন্ট)
        {
            tab_change ();
        }
    );

    ফাংশন ট্যাব পরিবর্তন ()
    {
        var hash = window.location.hash;
        হ্যাশ && $ ('উল.নভ এ [href = "' + হ্যাশ + '"]') .টিব ('শো');

        $ ('.tab-link')। ক্লিক করুন
        (
            ফাংশন (ঙ)
            {
                this (এটি) .tab ('প্রদর্শন');

                var স্ক্রোলমেম = $ ('দেহ') sc স্ক্রোলটপ () || '(' এইচটিএমএল ') .স্ক্রোলটপ ();
                window.location.hash = this.hash;
                ; ('এইচটিএমএল, দেহ') sc স্ক্রোলটপ (স্ক্রোলমেম);

                ; ('ul.nav-tabs a [href = "' + window.location.hash + '"]') .টিব ('শো');
            }
        );
    }

Answer 14

আমি বুঝতে পেরেছিলাম যে ওপি JQuery ব্যবহার করে বলেছিল তবে আপনি এটির জন্য কেবল ভ্যানিলা জেএস ব্যবহার করতে পারেন:

document.querySelectorAll('ul.nav a.nav-link').forEach(link => {
    link.onclick = () => window.history.pushState(null, null, link.attributes.href.value);
});

Answer 15

এটি জ্যাকুয়ারি এবং বুটস্ট্র্যাপ ব্যবহার করার সময় একটি অত্যন্ত অস্পষ্ট ট্যাবটিকে href ফায়ারিং না করেও ঠিক করে দেয়

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 

<script type="text/javascript">
$('.nav-tabs a').click(function (e) {
    // No e.preventDefault() here.
    $(this).tab('show');
});
</script>

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>

Comments

-1 আমি দেখতে পাই না যে উত্তরটি ঠিক একই কোড সহ 3 মাস আগে দেওয়া পূর্ববর্তী উত্তরের সাথে এই উত্তরটি কোনও মান যুক্ত করে। সুতরাং আমার নম্র মতামত একটি দরকারী উত্তর না।

— নাহ