Javascript JQuery函数不响应在按钮之间导航_Javascript_Jquery_User Interface

Javascript JQuery函数不响应在按钮之间导航

javascript jquery user-interface

Javascript JQuery函数不响应在按钮之间导航,javascript,jquery,user-interface,Javascript,Jquery,User Interface,我希望当我点击选项卡按钮时，按钮会被激活并显示相应的内容，但我无法理解为什么JavaScript功能不能按预期工作。下面分别是我的HTML、JavaScript和CSS <body>  <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"

我希望当我点击选项卡按钮时，按钮会被激活并显示相应的内容，但我无法理解为什么JavaScript功能不能按预期工作。下面分别是我的HTML、JavaScript和CSS

<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>          
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul id="list" class="nav navbar-nav">
        <li><a data-page="home-button" href="#">Home</a></li>
        <li><a data-page="about-button" href="#">About</a></li>
        <li><a data-page="contact-button" href="#">Contact</a></li>            
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="./">Login<span class="sr-only">(current)</span></a></li>
      </ul>
    </div>
  </div>
</nav>

<div id="pages">
    <div id="home-button" class="page" data-page="home-button">
        <div class="container">
            <div class="jumbotron">
                <h1>Welcome to 2018</h1>                    
            </div>
        </div>           
    </div>

    <div id="about-button" class="page hide" data-page="about-button">
        <div class="container">
            <div class="jumbotron">
                <h1>Content 2</h1>                
            </div>
        </div>
    </div>

    <div id="contact-button" class="page hide" data-page="contact-button">
        <div class="container">
            <div class="jumbotron">
                <h1>Content 3</h1>                
            </div>
        </div>
    </div>
</div>

这是我的CSS：

.hide {
display: none;
}

此

$（“#pages.page:not（'.hide'）”）

是不正确的选择器，必须更改为：

$（“#pages.page:not（.hide）”）

$（文档）.ready（函数（）{
$（“#导航栏#列表a”）。在（'click'，函数（e）上{
e、 预防默认值（）；
var page=$（this.data（'page'）；
$（“#pages.page:not（.hide）”）.stop（）.fadeOut（'fast'，function（）{
$（this.addClass（'hide'）；
$（“#pages.page[data page=“”+page+“]”]）.fadeIn（'slow'）.removeClass（'hide'）；
});
});
});
.hide{
显示：无；
}

切换导航








欢迎来到2018年
内容2
内容3
谢谢你的建议，但没用。实际上，我在我的javascript函数中保留了一个chrome中的调试点，当单击该点时，它不会被点击……我正在引用我头部部分中的文件。所以，我不知道我做错了什么。
.hide {
display: none;
}