Home » Javascript » JQuery function not responding to navigate between buttons

JQuery function not responding to navigate between buttons

Posted by: admin August 19, 2018 Leave a comment

Questions:

I am expecting when I click the tab buttons the buttons to get active and display there corresponding content but I am not able to figure out why JavaScript function not working as expected. Below is my HTML, JavaScript and CSS respectively.

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

This is my JavaScript function:

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

This is my CSS:

.hide {
display: none;
}
Answers: