Question

老实说，我很难准确地解释这个问题。我有一个导航栏，其中包含一些<li>元素，其中一个元素在其中有一个<ul>集合，用于下拉菜单。我今天才注意到它，但是当导航栏位于该特定按钮所针对的部分上方向下滚动该页面时，导航栏会更改为<li>活动并根据我的css更改颜色。

以下是我的下拉菜单代码。

<li class="dropdown">
                    <a class="dropbtn" data-toggle="dropdown" href="#pricing">
                        products
                        <span class="caret"></span>
                    </a>
                    <ul style="list-style:none !important; padding:0px 0px !important;" class="dropdown-content">
                        <li><a ng-click="SwitchProduct(0)" href="#pricing" data-toggle="collapse" data-target=".navbar-collapse.in">CPR-Web</a></li>
                        <li><a ng-click="SwitchProduct(1)" href="#pricing" data-toggle="collapse" data-target=".navbar-collapse.in">SC-Tracker</a></li>
                        <li><a ng-click="SwitchProduct(2)" href="#pricing" data-toggle="collapse" data-target=".navbar-collapse.in">Keystone Jury</a></li>
                    </ul>
                </li>

我正在调查，但我唯一能想到的是导航栏上的产品链接到上面更改为活动的部分。但我仍然不知道为什么。

我也很难解释它，所以这里有一个查看错误的链接。进入页面后，向下滚动到产品并看到导航栏单词更改为活动状态。 Link

Answer 1

所以我发现由于某种原因导致href="#pricing"成为问题的原因。因此，为了解决这个问题，我已经让我的ng-click滚动产品轮播，我只是将滚动逻辑添加到主页而不是主页上。

$scope.SwitchProduct = function (number) {

            // Store hash
            var hash = "#pricing";

            // Using jQuery's animate() method to add smooth page scroll
            // The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
            $('html, body').animate({
                scrollTop: $(hash).offset().top
            }, 900, function () {

                // Add hash (#) to URL when done scrolling (default click behavior)
                window.location.hash = hash;
            });

            $("#ProductsCycle").carousel(number);

        };

此外，我之前已经创建了一个名为FakeClickable的类，它使<a>个没有href标签的链接显示为。

<li class="dropdown">
                    <a  href="" class="dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Products <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a ng-click="SwitchProduct(0)" class="FakeClickable">CPR-Web</a></li>
                        <li><a ng-click="SwitchProduct(1)" class="FakeClickable">SC-Tracker</a></li>
                        <li><a ng-click="SwitchProduct(2)" class="FakeClickable">Keystone Jury</a></li>
                    </ul>
                </li>

当滚动到位置时，导航栏按钮变为活动状态，并将其转换为

1 个答案: