Javascript 导航栏错误_Javascript_Jquery_Html

Javascript 导航栏错误

javascript jquery html

Javascript 导航栏错误,javascript,jquery,html,Javascript,Jquery,Html,我正在创建一个网站，我打算让该网站只包含一个页面，页面上有多个部分，在屏幕顶部有一个导航栏，您可以随意点击导航栏上的部分滚动到该部分。当您单击该部分时，它还将突出显示您当前所在的部分我遇到的问题是，当我单击该部分时，它不会高亮显示/选择该部分 <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href

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

我遇到的问题是，当我单击该部分时，它不会高亮显示/选择该部分

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

另外，我使用的是方括号（方括号.io），当使用方括号内的“实时预览”时，它会正常工作，但在我测试它的任何浏览器上都不会工作。

您的ID应该始终是唯一的。使用类而不是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>

<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);