Scrollspy 无法使用导航选项卡答案

【问题标题】：Scrollspy not working with nav-tabsScrollspy 无法使用导航选项卡
【发布时间】：2014-08-25 14:31:34
【问题描述】：

我正在尝试将 scrollspy 添加到网站上的产品描述页面，该页面具有水平选项卡、“描述”、功能和评论选项卡。选项卡确实可以正常工作，但滚动间谍无法正常工作，并且仅显示最后单击的选项卡区域。代码如下，任何帮助都非常感谢。

查看jsfiddle中的代码@http://jsfiddle.net/iqadeer/1t5fqhbu/1/jsfiddle code

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
        #scrollable {
            height: 150px;
            overflow: scroll;
            position: relative;
        }

    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $('[data-spy="scroll"]').each(function () {
                var $spy = $(this).scrollspy('refresh')
            });
        });
    </script>

    <link href="/Content/pp_bootstrap_style.css" rel="stylesheet" />
    <script src="/Scripts/jquery-2.1.1.min.js"></script>
    <script src="/Scripts/jquery-ui-1.10.4.min.js"></script>
    <script src="/Scripts/bootstrap.min.js"></script>

    <title></title>
</head>
<body>
    <div class="row">
        <div class="col-md-12">
            <nav id="target_nav">
                <ul class="nav nav-tabs" role="tablist">
                    <li class="active"><a href="#1" role="tab" data-toggle="tab">Description</a></li>
                    <li><a href="#2" role="tab" data-toggle="tab">Features</a></li>
                    <li><a href="#3" role="tab" data-toggle="tab">Reviews (6)</a></li>
                </ul>
            </nav>
            <div class="tab-content" id="scrollable" data-spy="scroll" data-target="#target_nav">
              <div>
                <div class="tab-pane fade in active" id="1">
                    <div>
                        The TAG Heuer Men&#39;s Aquaracer 500 M Calibre 5 Automatic Black Dial Watch is a versatile, eye-catching timepiece that easily accompanies both office and athletic attire. The case, bezel, and band of this durable watch are made of stainless steel, which handsomely offsets the bold black dial and pays complement to its luminous hands and hourly indexes.
                    </div>
                    <div>
                        For convenience, an easy-to-read date window is set at the three o&#39;clock position. The Swiss Automatic movement of this watch means it&#39;s automatically powered by the natural movement of your arm, so you never need to change a battery.
                    </div>
                    <div>
                        With a durable antireflective-sapphire crystal and water resistance to a depth of 984 feet (300 meters), the Aquaracer is a fine timepiece that is made to last.
                    </div>
                    <div>Key Features: </div>

                </div><!--end col-md-9-->
                <div class="tab-pane fade" id="2">
                    <div>
                        Stainless Steel
                    </div>
                    <div>
                        Aluminium Case
                    </div>
                    <div>
                        Fine Brushed
                    </div>
                    <div>
                        Steel Bracelet
                    </div>
                    <div>
                        Black Dial
                    </div>
                    <div>
                        Case Diameter 41mm
                    </div>
                    <div>
                        Scratch Resistant Sapphire Crystal
                    </div>
                    <div>
                        Automatic Movement
                    </div>
                </div><!--end col-md-9-->
                  <div class="tab-pane fade" id="3">
                      <div class="text">

                          <b>Customer name</b>
                          <div class="pull-right">
                              <i class='glyphicon glyphicon-star'></i>
                              <i class='glyphicon glyphicon-star'></i>
                              <i class='glyphicon glyphicon-star'></i>
                              <i class='glyphicon glyphicon-star'></i>
                              <i class='glyphicon glyphicon-star'></i>
                              &nbsp;&nbsp;
                          </div>
                      </div><!--end txt class-->
                      <div class="text">

                          <b>Customer 2</b>
                          <div class="pull-right">
                              <i class='glyphicon glyphicon-star'></i>
                              <i class='glyphicon glyphicon-star'></i>
                              <i class='glyphicon glyphicon-star'></i>
                              <i class='glyphicon glyphicon-star'></i>
                              <i class='glyphicon glyphicon-star'></i>
                              &nbsp;&nbsp;
                          </div>
                      </div><!--end txt class-->
                      <div class="text">

                          <b>Customer 3</b>
                          <div class="pull-right">
                              <i class='glyphicon glyphicon-star'></i>
                              <i class='glyphicon glyphicon-star'></i>
                              <i class='glyphicon glyphicon-star'></i>
                              <i class='glyphicon glyphicon-star'></i>
                              <i class='glyphicon glyphicon-star-empty'></i>
                              &nbsp;&nbsp;
                          </div>
                      </div><!--end txt class-->
                      <br /><br />
                      <div class="text">
                          <b>Review this product</b>
                          <a href="/Product/WriteProductReview?productID=7398">Review this product</a>
                      </div>
                  </div>
                </div>

            </div><!--end main row-->
        </div>
    </div>

</body>
</html>

【问题讨论】：

标签： twitter-bootstrap scroll scrollspy bootstrap-tabs

【解决方案1】：

将以下内容附加到您的脚本应该可以工作。

$('#target_nav').on('activate.bs.scrollspy', function(){
    var activeTab = $('.nav-tabs li.active a');
    activeTab.parent().removeClass('active');
    activeTab.tab('show');
});

直播demo

【讨论】：

scrollspy 通过将类 active 附加到这些选项卡之一来更新导航选项卡。它不会更改选项卡内容，这就是我添加 sn-p 以显示指定窗格的原因。通过调用 tab 函数，它将类 active 添加到具有类 tab-pane 的 div 之一，因为 tab-pane 类 active 是可见的。