2014-09-07 2 views
0

Я пытаюсь закодировать простой show/hide div с помощью jQuery. В основном, когда я нажимаю на .artist-ken, я хочу, чтобы div artists-home исчез и .ken-gallery, чтобы заменить его.Показать/скрыть Функция jQuery не работает

До сих пор у меня есть, но это не делает ничего, кроме прыжков в верхней части страницы:

$('.artist-ken').click(function(){ 
    $('.artists-home').hide().show('ken-gallery'); 
}); 

ответ

3

Попробуйте это:

$('.artist-ken').click(function(e){ 
    e.preventDefault(); 
    $('.artists-home').hide(); 
    $('.ken-gallery').show(); 
}); 

Функция preventDefault() остановит от прыжков на этой странице. Для отображения другого div вам потребуется отдельный show. Также . отсутствовал в ken-gallery.

+0

Спасибо. Я решил, что хочу, чтобы дивы исчезли и исчезли. Поэтому я заменил '.hide'' .fadeOut' и '.show' на' .fadeIn'. Кажется, это работает. Есть ли что-то еще, что мне нужно добавить или есть более элегантный способ написать его? – J82

1

jQuery.show() не принимает селектор в качестве первого параметра, попробуйте вместо этого:

$('.artist-ken').click(function(){ 
    $('.artists-home').hide(); 
    $('.ken-gallery').show(); 
}); 

Я предполагаю, что элемент, который вы хотите скрыть имеет класс «.ken-галерея» и что элемент, который вы хотите показать имеет класс: «.artists-дом»

0
$('.artist-ken').click(function(e){ 
    e.preventDefault(); 
    $(".artists-home").hide(0, function() { 
     $('.ken-gallery').show(); 
    }); 
}); 
+0

В чем смысл функции обратного вызова? В любом случае анимации не будет. –

+0

Простой способ убедиться, что div показывает только тогда, когда другой скрыт. – chconger

+0

Поскольку 'hide' применяется мгновенно, браузер будет перерисовывать вычисленные разности в одном и том же фрейме. Нет причин тратить больше вычислительной мощности на создание другой функции (хотя это очень дешево). –

0

Попробуйте

$('.artist-ken').click(function(e){ 
    e.preventDefault(); 
    $('.artists-home').hide(); 
    $('.ken-gallery').show(); 
}); 

То, что вы сделали не настоящий параметр для функции show(). Плюс, даже если бы вы не указали, что это класс. Он может принимать только функцию, продолжительность, ничего или объект, ссылаясь на jQuery show reference page Вы также можете создать односторонний прослушиватель до show или hide другой.

$(document).click(function(e){ 
    if(e.target.classList.contains('artists-home')) { 
     e.preventDefault(); 
     $(e.target).hide(); 
     $('.ken-gallery').show(); 
    }else if(e.target.classList.contains('ken-gallery')){ 
     e.preventDefault(); 
     $(e.target).hide(); 
     $('.artists-home').show(); 
    } 
}); 

И что Chonger говорил, что если вы хотели замирание which is the duration parameter для любого из показать/скрыть и других анимационных свойств JQuery, то мы будем использовать функцию обратного вызова. Тогда мой единственный слушатель функции стал бы.

$(document).click(function(e){ 
    if(e.target.classList.contains('artists-home')) { 
     $(e.target).hide(500,function(){ 
     $('.ken-gallery').show(); 
     }); 
    }else if(e.target.classList.contains('ken-gallery')){ 
     $(e.target).hide(500,function(){ 
     $('.artists-home').show(); 
     }); 
    } 
}); 

EDIT Перечитайте ваш вопрос, то они должны быть ссылки на страницы, чтобы перейти к вершине, так что я добавил к функциям.

0

Dude show() cant есть параметр в() Скобки за исключением скорости или способ анимации, такой как show ('slow') ИЛИ show ('1000') действителен.

Ваш синтаксис является неправильным

Ниже действует синтаксис. Это означает, скрыть div с классом «.artists-home» и показать с классом «.ken-gallery».

$('.artist-ken').click(function(){ 
    $('.artists-home').hide(); 
    $('.ken-gallery').show(); 
}); 

Для получения дополнительной информации show

Смежные вопросы