文章/答案/技术大牛

发布

社区首页 >问答首页 >JQuery函数不响应按钮之间的导航

问JQuery函数不响应按钮之间的导航
EN

Stack Overflow用户

提问于 2018-05-22 00:09:48

回答 2查看 44关注 0票数 0

我希望当我点击选项卡按钮时，按钮会激活并显示相应的内容，但我无法弄清楚为什么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>

这是我的JavaScript函数：

$(document).ready(function() {
$("#navbar #list li a").on('click', function(e) {
    e.preventDefault();
    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');
    });
});
});

这是我的CSS：

.hide {
display: none;
}

user-interface

javascript

jquery

回答 2

Stack Overflow用户

发布于 2018-05-22 23:25:00

此$("#pages .page:not('.hide')")是错误的选择器，必须更改为以下内容：$("#pages .page:not(.hide)")

票数 0

Stack Overflow用户

发布于 2018-05-22 23:35:19

$(document).ready(function() {
$("#navbar #list li a").on('click', function(e) {
    e.preventDefault();
    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 {
display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/50452695

复制

相似问题

问JQuery函数不响应按钮之间的导航
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JQuery函数不响应按钮之间的导航EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JQuery函数不响应按钮之间的导航
EN