Twitter Bootstrap手动关闭选项卡

Question

UPDATE WORKING NOW

Got it working now. Script snippet was wrong and was not even called somehow.

For future reference -> to close bootstrap tabs:

</script>
$("#closetab").click(function() {
$("#myTabContent").hide();
});
</script>


<a href="#" id="closetab">Close</a>

And be careful when using center-TAGs for anchor texts. It screws with your js/jquery when pointing to IDs of content within the center TAG.

---

Im using Bootstrap Tabs ( http://twitter.github.com/bootstrap/javascript.html#tabs ) with a slightly changed bootstrap-tab.js to show tabs on hover:

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

Now i want to add a way to manually close those tabs. I found a code snippet somewhere that does the trick in Chrome/Mozilla/Opera but not in IE:

<script>
$('a[href="#closetab"]').on('click',function(){
$("#flyout_tab").hide();
});
</script>

and

<a href="" id="closetab">Close</a>

In IE when i click the close-button it sends me to the root of the directoy the site is in.

I guess it has something to do with the way IE handles empty a href's (a href=""). When i put something like a href="#" it wont work in any browser.

Answer 1

Try putting "closetab" in the href property like this:

<a href="#closetab">Close</a>

Since the above code doesn't work, try changing the script to:

<script>
    $('#closetab').on('click',function(){
        $("#flyout_tab").hide();
    });
</script>