programing

Twitter 부트스트랩 - 탭 - URL이 변경되지 않음

subpage 2023. 8. 22. 22:10
반응형

Twitter 부트스트랩 - 탭 - URL이 변경되지 않음

저는 트위터 부트스트랩과 "탭"을 사용하고 있습니다.

다음 코드가 있습니다.

<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의 에 #add, #edit, #delete가 추가되지 않았습니다.

가 때할거를 제거할 때.data-toggleURL은 변경되지만 탭이 작동하지 않습니다.

이것에 대한 해결책이 있습니까?

이 코드를 사용해 보십시오.페이지 로드 시 해시를 기준으로 url + open 탭에 탭을 추가합니다.

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

완전한 솔루션에는 다음과 같은 세 가지 구성 요소가 필요합니다.

  1. URL에 해시가 있으면 페이지가 로드될 때 올바른 탭을 표시합니다.
  2. 탭이 변경될 때 URL의 해시를 변경합니다.
  3. URL에서 해시가 변경되면 탭을 변경하고(뒤로/앞으로 버튼) 첫 번째 탭이 올바르게 순환되었는지 확인합니다.

저는 여기에 있는 어떤 논평도, 그리고 받아들여진 답변도 이 모든 시나리오를 다루지 않는다고 생각합니다.

관련된 부분이 꽤 많기 때문에 작은 jQuery 플러그인으로 가장 깔끔하다고 생각합니다: https://github.com/aidanlister/jquery-stickytabs

플러그인을 다음과 같이 호출할 수 있습니다.

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

저는 이것을 위한 블로그 게시물을 만들었습니다, http://aidanlister.com/2014/03/persisting-the-tab-state-in-bootstrap/ .

용사를 합니다.data-toggle="tab" 플러그인이 탭을 처리하도록 요청하고, 이를 수행하는 동안 호출합니다.preventDefault이벤트(기트허브의 코드).

자체 탭 활성화를 사용하여 이벤트를 진행할 수 있습니다.

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

속성 ▁the▁attribute▁remove다합니▁and▁must▁you야를 제거해야 합니다.data-toggle="tab"

의심이 있으면 의사를 확인합니다.

앵커 요소가 이미 URL 해시를 변경했으므로 해시 변경 이벤트를 듣는 것도 좋은 방법입니다.@flori가 이미 언급했듯이, 이 방법은 브라우저 뒤로 버튼과 잘 작동합니다.

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

마지막으로, 수신기를 정의한 직후 이벤트를 트리거하면 페이지 로드 시 올바른 탭을 표시하는 데 도움이 됩니다.

당신의 문제에 대한 나의 해결책:

새 을 추가합니다.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>

를 들어, 둘를, 탭의 ID 변니에서 변경합니다. 예:addtab-add 하도록 업데이트합니다.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>

그리고 마지막으로 js 코드:

<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이 있습니다. 하지만 jsFiddle에서 사용하는 iframe 때문에 작동하지 않지만, 제 솔루션의 소스를 읽을 수 있습니다.

케이크와 같은 문제부트스트랩 3 탭이 있는 PHP, 그리고 외부 URL 및 앵커와 함께 보낼 때, 이것을 만든 많은 솔루션을 검토한 후 메뉴를 잃는 섹션으로 점프합니다...

덕분에: 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

해시 변경에 대응하는 간단한 방법도 있습니다(예: 뒤로 버튼).해시 변경 이벤트 수신기를 maszbak 솔루션에 추가하기만 하면 됩니다.

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

OP가 JQuery를 사용하여 말한 것으로 알고 있지만 바닐라 JS를 사용하여 간단히 수행할 수 있습니다.

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

가장 간단한 것은 문서화된 데이터를 사용하고 있다고 가정할 때data-toggle="tab"여기에 설명된 구문:

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

저는 부트스트랩 3.3.*을 사용하고 있는데 위의 솔루션 중 어떤 것도 제게 도움이 되지 않았고 심지어 답변 1로 표시되었습니다.저는 단지 아래 스크립트를 추가하고 작업했습니다.

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

이것이 도움이 되길 바랍니다.

Ruby on Rails 또는 다른 서버 사이드 스크립트를 사용하는 사용자는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)) %>

접두사를 사용하여 창이 ID로 이동하지 않도록 하는 경우:

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

또는 JavaScript:

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에서 작동합니다.

하지만 원본 솔루션에 대한 @tomaszbak 덕분에 편집이 거부되었고 그의 게시물에 대해 언급할 수 없지만 조금 더 개선되고 읽기 쉬운 버전을 여기에 남길 것입니다.

기본적으로 동일한 작업을 수행하지만 그의 브라우저 간 호환성 문제를 해결하면 됩니다.

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

다음은 다음을 사용하는 옵션입니다.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');
    }
  });
});

위의 어떤 것도 저에게 효과가 없었기 때문에, 저는 다음과 같이 작업했습니다.

  1. 더하다class="tab-link"이 기능이 필요한 모든 링크에
  2. 다음 코드를 Javascript에 추가합니다.
window.addEventListener('팝스테이트',함수(이벤트){tab_change();});
function tab_change(){var hash = window.location.해시;hash & & $( 'ul.nava[href="] + 해시 + '"]' .tab( 'show' );
$( '.tab-link')를 클릭합니다.(함수( e){$( 이 .tab( 'show' );
varscrollmem = $('body').scrollTop() || $('body').scrollTop();window.location.hash = 이것.해시;$( 'html, body') .scrollTop(scrollmem );
$( 'ul.nav-valua[href="] + window.location.hash + '"]' .tab( 'show' );});}

이것은 또한 jquery 및 부트스트랩을 사용할 때 실행되지 않는 매우 모호한 탭을 수정합니다.

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

언급URL : https://stackoverflow.com/questions/12131273/twitter-bootstrap-tabs-url-doesnt-change

반응형

'programing' 카테고리의 다른 글

내보내기-CSV 내보내기 길이만 이름이 아님  (0) 2023.08.22
git 원격 분기 추가  (0) 2023.08.22
Android, ListView 불법 상태 예외: "어댑터의 내용이 변경되었지만 ListView에서 알림을 받지 못했습니다."  (0) 2023.08.22
도커 파일에서 다중 RUN과 단일 체인 RUN 중 어느 것이 더 좋습니까?  (0) 2023.08.22
노드 js 파일에서 폴더 경로 가져오기  (0) 2023.08.22

'programing'의 다른글

  • 현재글Twitter 부트스트랩 - 탭 - URL이 변경되지 않음

관련글

댓글

티스토리툴바