jQuery Показать / Скрыть Вопрос

Question

Я просто пытаюсь выполнить очень простое действие jQuery.

У меня есть два компонента: #safety и #safety-tab a, #safety необходимо скрыть при загрузке. Если щелкнуть ссылку в #safety-tab, она будет hide сама по себе и slideUp #safety.

.

Это работает, но поле #safety только мигает при нажатии, не отображается:

 $(document).ready(function() {
   $("#safety-tab a").click(function() {
     $(this).hide();
     $("#safety").removeClass("hide");  
   });
   });

Пока разметка такая:

     <div id="safety" class="hide group">
      ...
     </div><!--end #safety-->
    <div id="safety-tab">
      <a href="">...</a>
    </div><!--end #safety-tab-->

Есть идеи, что я делаю не так?

Answer 1

Добавьте return false; или event.preventDefault() к вашему обработчику кликов.

$(document).ready(function() {
   $("#safety-tab a").click(function( event ) {
     $(this).hide();
     $("#safety").removeClass("hide");  
     event.preventDefault();
   });
});

Это предотвращает поведение по умолчанию элемента <a>, который перезагружает страницу.

• http://api.jquery.com/event.preventDefault

Использование event.preventDefault() сохранит всплывающее сообщение о событии, которое иногда необходимо.

Выполнение return false; предотвратит поведение по умолчанию, но также остановит всплытие.

Answer 2

попробуйте вернуть false, когда вы нажимаете на ссылку;

 $(document).ready(function() {
   $("#safety-tab a").click(function() {
     $(this).hide();
     $("#safety").removeClass("hide");  
     return false;
   });
   });