1

ok, im using Jquery (edge) version, and bootstrap 2.0, and i have this code:

    <div id="leftcol">
    <div id="ppl" class="tabbable tabs-left">
        <ul id="tabppl">
        <li class="active"><a class="bl" href="#1" data-target="#1" data-toggle="tab"> 1<span class="arroright"> </span></a> </li>
        <li><a class="bl" href="#2" data-target="#2" data-toggle="tab"> 2<span class="arroright"> </span></a> </li>
        <li><a class="bl" href="#3" data-target="#3" data-toggle="tab"> 3 <span class="arroright"> </span></a> </li>
        <li><a class="bl" href="#4" data-target="#4" data-toggle="tab">  4<span class="arroright"> </span></a>  </li>
        <li><a class="bl" href="#5" data-target="#5" data-toggle="tab"> 5<span class="arroright"> </span></a></li>
        <li><a class="bl" href="#6" data-target="#6" data-toggle="tab"> 6<span class="arroright"> </span></a>  </li>
        <li><a class="bl" href="#7" data-target="#7" data-toggle="tab"> 7 <span class="arroright"> </span></a></li>
        <li><a class="bl" href="#8" data-target="#8" data-toggle="tab"> 8<span class="arroright"> </span></a>  </li>
        <li><a class="bl" href="#9" data-target="#9" data-toggle="tab">9 <span class="arroright"> </span></a> </li>
        </ul>
    </div><!-- ppl-->
</div><!--leftcol-->

I know the theory, and a simple code like this only works if i put "data-toggle="tab"" in each -a- tag but the #Direction doesnt appear on the navigation bar, it only changes the content, the url http://twitter.github.com/bootstrap/javascript.html#tabs does not explain this, is like a nav, but with the tabs. I need all this information appear on the navigation bar. Like http://Your-url.com/#yourtabclicked

2 Answers 2

1

I found something that work. It makes all the URL work with the #ID pointer. just adding this:

$(function () {
  var activeTab = $('[href=' + location.hash + ']');
  activeTab && activeTab.tab('show');
});

And this other code to appear your Tab opened on the navigation bar when you click it:

$('.nav a').on('shown', function (e) {
  window.location.hash = e.target.hash;
})

most of the code was found in different parts of this website.

NOTE: you need the lastest JQuery (with the actual 1.7.1 works).

1

The tabs has by default set e.preventDefault.

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

You may try to disable defaults by:

$('body').off('click.tab.data-api');

for example.

  $(function () {

    $('body').off('click.tab.data-api');

    $('body').on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
         //notice the e.preventDefault() is missing now
         $(this).tab('show');
    })
  })

Didn't test but it should work.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.