How Can I Load External Pages In The Same Tab With Twitter-bootstrap Framework?

I can't find examples of 'first senario' in Basic tabs example on Tabs used as regular navigation (loading external pages in the same tab). I've this tabs :

Solution 1:

Coming form others js plug-in behaviors, I didn't realize it was so simple.

Thanks to jasny for clarifying :

If you're loading different pages there is no need for the javascript, as you can simply output the correct HTML. So solving it in your server side code (Ruby, PHP, Phyton or whatever).

  <!-- URL: / -->
  <ul class='tabs' data-tabs='tabs'>
    <li class='active'><a href="/">Home</a></li>
    <li><a href="/cms/watchers">CMS</a></li>
    <li><a href="/css/watchers">CSS</a></li>
    <li><a href="/ruby/watchers">Ruby</a></li>
    <li><a href="/framework/watchers">Framework</a></li>
  </ul>

  <!-- URL: /cms/watchers -->
  <ul class='tabs' data-tabs='tabs'>
    <li><a href="/">Home</a></li>
    <li class='active'><a href="/cms/watchers">CMS</a></li>
    <li><a href="/css/watchers">CSS</a></li>
    <li><a href="/ruby/watchers">Ruby</a></li>
    <li><a href="/framework/watchers">Framework</a></li>
  </ul>

So only use the javascript if you want to be able to switch tabs without reloading the page.

Share