引導標籤關閉活動上點擊

我有下面的代碼：引導標籤關閉活動上點擊

<div id="action_wrap"> 
    <div id="action_nav"> 
     <div class="action" data-target="#content1" data-toggle="tab">First Block</div> 
     <div class="action" data-target="#content2" data-toggle="tab">Second Block</div> 
     <div class="action" data-target="#content3" data-toggle="tab">Third Block</div> 
    </div> 
    <div id="action_items"> 
     <div class="action_text collapse" id="content1"> 
      <p>Content 1</p> 
      <span class="close">Close</span> 
      <div class="clearfix"></div> 
     </div> 
     <div class="action_text collapse" id="content2"> 
      <p>Content 2</p> 
      <span class="close">Close</span> 
      <div class="clearfix"></div> 
     </div> 
     <div class="action_text collapse" id="content3"> 
      <p>Content 3</p> 
      <span class="close">Close</span> 
      <div class="clearfix"></div> 
     </div> 
    </div> 
</div>

，並使用Twitter Boostrap's "Tab" script，它工作正常。我已經添加了一些非常討厭的腳本關閉按鈕和導航按鈕來獲得活動類，像這樣：

$(".action").click(function() { 
    $(this).parent().children().removeClass("active"); 
    $(this).addClass("active"); 
    $(this).parent().addClass("active"); 
}); 

$(".close").click(function() { 
    $(this).parent().parent().parent().children().removeClass("active"); 
    $(this).parent().parent().parent().children().children().removeClass("active"); 
});

這不是很多，但咩，它的工作。

什麼我不能這樣做壽是做引導的選項卡的可關閉的點擊活躍的資產淨值股利。這意味着如果我點擊第一個.action div與數據目標on＃content1，.action_text＃content1將獲得。活動類，所以我會點擊.action div。我想要的是.action.active數據目標=「＃content1」點擊刪除.tab（）的類「活躍」和相同的自己。

我在另一個線程，從引導的標籤腳本

$(document).on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) { 
    e.preventDefault() 
    $(this).tab('show') 
})

改變代碼，但似乎每次我編輯它，它只是打破了整個事情找到。我試圖添加如果像這樣的聲明

$(document).on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) { 
     if ($(this).hasClass('active')) { 
     $(this).tab().removeClass('active'); 
     $(this).removeClass('active'); 
     } else { 
     e.preventDefault() 
     $(this).tab('show') 
     } 
    })

但整件事停止工作。

來源

2013-07-06 user2487147

首先，您應該儘量避免更改Bootstrap本機代碼，否則您可能會失去升級到未來版本的能力。

關於你的問題，你可能碰到一些事件併發問題象我...

如果你想在標籤切換，當點擊關閉當前標籤，看看這裏： http://bootply.com/61835（學分凱蒂，我此腳本的不是所有者）

但是，如果你希望能夠關閉當前標籤（切換和窗格）時：

點擊活動標籤切換
點擊其他地方外標籤切換或窗格
按ESC鍵

...那麼這個腳本可以幫助你：

$(function() { 

    var active = $('a[data-toggle="tab"]').parents('.active').length; 
    var tabClicked = false; 

    // Closes current active tab (toggle and pane): 
    var close = function() { 
     $('a[data-toggle="tab"]').parent().removeClass('active'); 
     $('.tab-pane.active').removeClass('active'); 
     active = null; 
    } 

    // Closing active tab when clicking on toggle: 
    $('[data-toggle=tab]').click(function(){ 
     if ($(this).parent().hasClass('active')){ 
      $($(this).attr("href")).toggleClass('active'); 
      active = null; 
     } else { 
      tabClicked = true; 
      active = this; 
     } 
    }); 

    // Closing active tab when clicking outside tab context (toggle and pane): 
    $(document).on('click.bs.tab.data-api', function(event) { 
     if(active && !tabClicked && !$(event.target).closest('.tab-pane.active').length) { 
      close(); 
     } 

     tabClicked = false; 
    }); 

    // Closing active tab on ESC key release: 
    $(document).keyup(function(e){ 
     if(active && e.keyCode === 27) { // ESC 
      close(); 
     } 
    }); 
});

你可以用這個的jsfiddle嘗試： http://jsfiddle.net/almeidap/EAuUY/（使用Bootstrap 3）

來源

2013-11-30 00:35:51 almeidap

note。這假定頁面上有一個標籤實例。 – Artistan

即使使用完全限定的URL，這實際上也會關閉標籤頁。

$('[data-toggle=tab]').click(function(){ 
    if ($(this).parent().hasClass('active')){ 
    var url = $(this).attr('href'); 
    var tid = url.split('#')[1]; 
    console.log(tid); 
    $('#'+tid).toggleClass('active'); 
    document.location.hash = ''; 
    } 
}); 
/// also can work with pills by switching to $('[data-toggle=pill]')

來源

2014-03-21 18:37:58 Artistan

引導標籤關閉活動上點擊

回答

相關問題