Question

我无法获得使用CSS设置的标签式导航以正常运行。基本上需要做的是，当单击一个按钮时，通过单击按钮从div访问的div中删除隐藏的类，并将其附加到另一个div。

我看到的行为是，应该被取消隐藏的div在屏幕上闪烁片刻，然后立即再次隐藏。

代码：

＆＃13;

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

＆＃13;

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

＆＃13;

编辑：在进一步调查中，这似乎是没有event.preventDefault（）的问题。我正努力尝试修复它。

Answer 1

我不知道它是不是你想要的。但是对于按钮（链接），您必须在href属性中添加“＃”。一个（最后）div错过了。

$('#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

您需要在单击时取消链接的默认操作，方法是调用传递的事件的preventDefault()方法。

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

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

2 个答案: