bootstrap with multiple tabbable and scroll spy not working

StackOverflow https://stackoverflow.com/questions/17958207

  •  04-06-2022
  •  | 
  •  

Pregunta

I have a page with two bootstrap tabbable. In every tabbable one tab is set to active

Here is my markup: 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
        <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    </head>

    <body data-spy="scroll">
        <div>
            <ul class="nav nav-tabs" id="tablist-1">
                <li><a href="#software-tab-1" data-toggle="tab">software 1</a></li>
                <li class="active"><a href="#hardware-tab-1" data-toggle="tab">hardware 1</a></li>
            </ul>

            <div class="tab-content">
                <div class="tab-pane" id="software-tab-1">software 1</div>
                <div class="tab-pane active" id="hardware-tab-1">hardware 1</div>
            </div>
        </div>

        <div>
            <ul class="nav nav-tabs" id="tablist-2">
                <li class="active"><a href="#software-tab-2" data-toggle="tab">software 2</a></li>
                <li><a href="#hardware-tab-2" data-toggle="tab">hardware 2</a></li>
            </ul>

            <div class="tab-content">
                <div class="tab-pane active" id="software-tab-2">software 2</div>
                <div class="tab-pane" id="hardware-tab-2">hardware 2</div>
            </div>
        </div>

    </body>
</html>

If the page loads, only the tab of the last tabbable is active. The active state of the first tabbable is missing.

Setting the two tabs to active with javascript also does not work.

<script>
    $(document).ready(function(){
        $('#tablist-1 a:first').tab('show');
        $('#tablist-2 a:first').tab('show');
    });
</script>

If I remove data-spy="scroll" from the body tag it works.

How to get scrollspy and multiple tabs working?

¿Fue útil?

Solución

Make sure your body also has a data-target for the ScrollSpy..

<body data-spy="scroll" data-target="software-tab-1">

Demo: http://www.bootply.com/70727

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top