Question

我有一个带滚动间谍的简单页面。滚动时效果很好，但是当我单击导航面板中的链接时，前一个链接会突出显示（尽管页面滚动正确）。此外，当我从第一个div中删除class =“navbar”时，滚动也会开始出现故障（在正确的时间内突出显示触发）。 HTML如下：

<!DOCTYPE html>
<html>
<head>
    <!--<script src="http://code.angularjs.org/1.0.7/angular.js"></script>-->
    <script src="./jquery-1.9.1.js"></script>
    <script src="./bootstrap.js"></script>
    <link rel="stylesheet" href="./bootstrap.css" />
</head>
<body>
    <div id="navbarExample" class="navbar">
        <ul class="nav">
            <li><a href="#abc">abc</a></li>
            <li><a href="#def">def</a></li>
            <li><a href="#ghi">ghi</a></li>
        </ul>
    </div>
    <div data-target="#navbarExample" data-spy="scroll" style="width: 200px; height: 120px; overflow-y: scroll">
        <h4 id="abc">abc</h4>
        <div>a b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0 a b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0 a b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0</div>
        <h4 id="def">def</h4>
        <div>a b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0 a b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0 a b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0</div>
        <h4 id="ghi">ghi</h4>
        <div>a b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0 a b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0 a b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0</div>
    </div>
</body>
</html>

有解决方案吗？

Answer 1

我也有这样的问题，将您的数据属性移动到正文并且它将起作用。

<!DOCTYPE html>
<html>
<head>
    <!--<script src="http://code.angularjs.org/1.0.7/angular.js"></script>-->
    <script src="./jquery-1.9.1.js"></script>
    <script src="./bootstrap.js"></script>
    <link rel="stylesheet" href="./bootstrap.css" />
</head>
<body data-target="#navbarExample" data-spy="scroll">
    <div id="navbarExample" class="navbar">
        <ul class="nav">
            <li><a href="#abc">abc</a></li>
            <li><a href="#def">def</a></li>
            <li><a href="#ghi">ghi</a></li>
        </ul>
    </div>
    <div style="width: 200px; height: 120px; overflow-y: scroll">
        <h4 id="abc">abc</h4>
        <div>a b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0 a b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0 a b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0</div>
        <h4 id="def">def</h4>
        <div>a b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0 a b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0 a b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0</div>
        <h4 id="ghi">ghi</h4>
        <div>a b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0 a b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0 a b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0</div>
    </div>
</body>
</html>

Twitter Bootstrap Scrollspy：突出显示错误的项目

1 个答案: