3

i have a working tabs instance here and prepared a jsfiddle (somehow the tabs don't work correctly here, but the link issue is still present): http://jsfiddle.net/Gyrga/6/

The links in the tab panes don't work anymore and don't go to the URL http://somewhere.com at all.. Why? What did I overlook?

Thanks!

cukabeka
  • 530
  • 2
  • 9
  • 22
  • The tabs don't work because you forgot to close the JS `});` and you included twice bootstrap JS via the manage resources and the framework panel (the 2nd time breaks it). – Sherbrow Aug 14 '12 at 15:49
  • well, I'm not a that experienced fiddler.. ;) the mistake was in the markup, see my accepted answer. – cukabeka Aug 23 '12 at 07:30

1 Answers1

6

When you use the tabs, you need to do the following (according to the doc)

<a href="#home" data-toggle="tab">Home</a>
<!-- etc -->

<div class="tab-content">
    <div class="tab-pane active" id="home">...</div>
    <!-- etc -->
</div>

But in your example, you put the data-toggle="tab" on the .tab-pane which breaks the links inside.

Just remove this attribute and put it on the link which actually toggles the tab. That way you won't even need the JavaScript to activate them.

Working demo (jsfiddle)

Sherbrow
  • 17,279
  • 3
  • 64
  • 77
  • 1
    oh yeah! that was easy.. works perfectly now. thanks for clearing this mistake up! :) – cukabeka Aug 23 '12 at 07:29
  • This class also breaks checkboxes and radio buttons. Checkboxes will not show as checked nor will radio buttons be checked. – hanzolo Sep 19 '18 at 21:09
  • 1
    @hanzolo Although there's no custom JavaScript, the framework still uses JavaScript to catch the event and prevents the default action of the click ; for example the checking for the checkboxes. – Sherbrow Sep 19 '18 at 21:23
  • @Sherbrow - i was just calling out that it breaks the checkbox and radio inputs as well. That was the problem I was facing when i found this very helpful solution – hanzolo Sep 24 '18 at 19:05