Question

我正在创建一个网站，我计划让网站只包含一个页面，页面上有多个部分，屏幕顶部有一个导航栏，可以点击上面的部分导航栏会将您滚动到该部分。当您单击该部分时，它还会突出显示您当前所在的部分。

我遇到的问题是，当我点击该部分时，它不会突出显示/选择该部分。

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link rel="stylesheet"  href="index.css"/>
    </head>

    <body>
        <div class="nav-bar">
            <ul>
                <li class="logo">BOS</li>
                 <div> <li id="btn">Contact</li> </div>
                 <div> <li id="btn">Services</li> </div>
                 <div> <li id="btn">About</li> </div>
                 <div> <li class="selected" id="btn">Home</li> </div>
            </ul>           
        </div>

         <div class="slide-out">        
         </div>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="app.js"></script>

    </body>

</html>

这是我用来选择部分的JavaScript：

var main = function () {
$('.nav-bar #btn').click(function() {
    $(".nav-bar #btn").removeClass("selected");

    $(this).addClass("selected");
}); 
};

$(document).ready(main);

另外，我正在使用Brackets（bracket.io），它在Brackets中使用“实时预览”时可以正常工作，但在我测试的任何浏览器上都无法正常工作。

Answer 1

你的ID应该始终是独一无二的。使用class而不是Id。

<ul>
                <li class="logo">BOS</li>
                 <div> <li class="btn">Contact</li> </div>
                 <div> <li class="btn">Services</li> </div>
                 <div> <li class="btn">About</li> </div>
                 <div> <li class="btn selected">Home</li> </div>
            </ul>

然后尝试：

var main = function () {
$('.nav-bar .btn').click(function() {
    $(".nav-bar .btn").removeClass("selected");

    $(this).addClass("selected");
}); 
};

$(document).ready(main);

导航栏错误

1 个答案: