Question

我正在尝试将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>

Answer 1

将以下内容附加到您的脚本应该有效。

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

直播demo

Scrollspy无法使用nav-tabs

1 个答案: