Question

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

Answer 1

此$("#pages .page:not('.hide')")是一个不正确的选择器，必须更改为：$("#pages .page:not(.hide)")

Answer 2

＆＃13;

$(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');
    });
});
});

＆＃13;

.hide {
display: none;
}

＆＃13;

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

＆＃13;

JQuery函数没有响应按钮之间的导航

2 个答案: