bootstrap tab dropdown not working after adding tab-pane

Question

I'm very new in web design and bootstrap.. i'm trying to create a header using tabs..and adding a dropdown menu..the code looks like this..

<body>
    <div class="tabbable">
        <ul class="nav nav-tabs">
            <li class="active"><a href="#1" data-toggle="tab">Home</a></li>
            <li class="dropdown">
                <a href="#2" class="dropdown-toogle" data-toggle="dropdown">Tentang Kami<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action1</a></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action2</a></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action3</a></li>
                </ul>
            </li>
            <li><a href="#3" data-toggle="tab">Contact Us</a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active" id="1">
                <iframe src="pages/home.html" width="1250" height="500" frameborder="0"></iframe>
            </div>
            <div class="tab-pane active" id="2">
                <iframe src="pages/sejarah.html" width="1250" height="500" frameborder="0"></iframe>
            </div>
            <div class="tab-pane active" id="3">
                <iframe src="pages/contactus.html" width="1250" height="500" frameborder="0"></iframe>
            </div>
            <div class="tab-pane active" id="4">
                <iframe src="pages/visimisi.html" width="1250" height="500" frameborder="0"></iframe>
            </div>
            <div class="tab-pane active" id="5">
                <iframe src="pages/progstudi.html" width="1250" height="500" frameborder="0"></iframe>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        $(document).ready(function(){
            $(".tab-pane.active").hide(); // Hide all tab conten divs by default
            $(".tab-pane.active:first").show(); // Show the first div of tab content by default
        });
    </script>
</body>

So, the "Tentang Kami" tab should be represented by a dropdown..but when i try it, the dropdown won't show.. But when i try to empty text inside the <div class="tab-content"> , the dropdown works.. Am I missing something? Sorry for my bad English

Answer 1

Your dropdown don't work cause you have href="#2" where id="2" exists. The dropdown plugin requires a not valid target here. Solution change href="#2" to href="#" or add data-target="nonsense" to your toggle anchor.

Reason the plugin try to find the parent by:

  function getParent($this) {
    var selector = $this.attr('data-target')

    if (!selector) {
      selector = $this.attr('href')
      selector = selector && /#/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
    }

    var $parent = selector && $(selector)

    return $parent && $parent.length ? $parent : $this.parent()
  }

When you don't have a data-target in your anchor (which make sense) the href will be test. When this attribute exits it has a length and the parent of this element will be returned as the parent of your dropdown.

Since a href don't seems to be required Is href required on links? the best solution will to add non href atribute to an anchor with data-toggle="dropdown" maybe.

Note you define your id's with numbers only, see: What are valid values for the id attribute in HTML?

bootstrap tab dropdown not working after adding tab-pane

Question

1 answers

solution1
1 ACCPTED 2013-10-01 20:10:27

bootstrap tab dropdown not working after adding tab-pane

Question

1 answers

solution1 1 ACCPTED 2013-10-01 20:10:27

solution1
1 ACCPTED 2013-10-01 20:10:27