0

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

请参阅 jsfiddle 中的代码@http ://jsfiddle.net/iqadeer/1t5fqhbu/1/ jsfiddle 代码

    <!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>
4

1 回答 1

1

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

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

现场演示

于 2015-03-26T05:34:32.120 回答