带有选项卡式导航的jQuery行为异常

Question

I'm having trouble getting the tabbed navigation I set up with CSS to behave properly. Basically what needs to happen is that when one button is clicked, removes the hidden class from the div that's accessed by clicking the button, and appends it to the other div.

The behavior I see is that the div that is supposed to become unhidden flashes on screen for a moment, then is immediately hidden again.

The code:

 $('#js-add-trip').on('click', () => { $('#js-trip-list-form').removeClass('hidden'); $('.saved-trips').addClass('hidden'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id='nav'> <nav> <ul> <li id='selected js-saved-trips'> <a href=''>Your Saved Trips</a> </li> <li id='js-add-trip'> <a href=''>Add a Trip</a> </li> </ul> </nav> </div> <div id="sub-container"> <form id="js-trip-list-form" class="add-form hidden"> <!--code for form here--> </form> <div class="saved-trips"> <ul class="trip-list js-trip-list"></ul> <!--population of this area handled by jQuery--> </div> 

Edit: on further investigation, this seems to be a problem with no event.preventDefault(). I'm working on trying to fix it.

Answer 1

I don't know if it is exactly what you want. But to buttons (links) you have to add '#' to href attribute. And one (last) div missed.

 $('#js-add-trip').on('click', () => { $('#js-trip-list-form').toggleClass('hidden'); $('.saved-trips').toggleClass('hidden'); }); 

 .hidden { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id='nav'> <nav> <ul> <li id='selected js-saved-trips'> <a href='#'>Your Saved Trips</a> </li> <li id='js-add-trip'> <a href='#'>Add a Trip</a> </li> </ul> </nav> </div> <div id="sub-container"> <form id="js-trip-list-form" class="add-form hidden"> <!--code for form here--> hidden </form> <div class="saved-trips"> <ul class="trip-list js-trip-list"> <li>visible</li> </ul> <!--population of this area handled by jQuery--> </div> </div> 

Answer 2

You need to cancel the default action of the link when you click it, by calling the preventDefault() method of the passed event.

$('#js-add-trip').on('click', (e) => {
  e.preventDefault();
  $('#js-trip-list-form').removeClass('hidden');
  $('.saved-trips').addClass('hidden');
});