Лучший подход к слайду и вкладкам с помощью jQuery
-
08-07-2019 - |
Вопрос
Я создаю страницу с изображением вверху и меню внизу. Когда пользователь нажимает одну из 3 кнопок меню, слайд изображения и страница прокручиваются вниз, так что меню находится вверху страницы, тогда правый .content div исчезает. Слайд-ап должен происходить только в первый раз, когда пользователь нажимает на кнопки.
Какой самый лучший способ сделать это с помощью jQuery? (без плагинов)
Мне также нужно знать, как я не могу предотвратить его исчезновение на странице, которая уже видна, если я дважды нажму одну и ту же кнопку?
Я использую rel вместо href , поскольку href заставил страницу перескочить, даже если return false .
Это то, что я имею до сих пор:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
imgVisible = true;
$('#mainmenu a').click(function(){
var $activeTab = $(this).attr('rel');
if(!imgVisible){
$('html:not(:animated),body:not(:animated)').animate({scrollTop:$('#mainmenu').offset().top-20},500);
$('.content').hide();
$($activeTab).fadeIn();
} else{
$('#imgholder').slideUp(500,function(){
imgVisible = false;
$('#mainmenu a[rel="'+$activeTab+'"]').click();
});
}
return false;
});
});
</script>
<div id="imgholder"><img src="image.jpg" /></div>
<div id="mainmenu">
<ul>
<li><a rel="#tab1"></a></li>
<li><a rel="#tab2"></a></li>
<li><a rel="#tab3"></a></li>
</ul>
</div>
<div id="container">
<div class="content" id="tab1">
content
</div>
<div class="content" id="tab2">
content
</div>
<div class="content" id="tab3">
content
</div>
</div>
Решение
Следующий код выполняет то, что вам нужно:
$('#mainmenu a').click(function(){
var myrel=$(this).attr('rel');
$('.content:not([id='+myrel+'])').hide();
$('#imgholder').slideUp(500,function(){
$('#'+myrel).fadeIn();
});
});
....
<li><a href='#' rel='tab0'></a></li>
Я удалил знак '#' из вашей части rel = ''; -)
Я не уверен, почему вы хотите прокрутить страницу. Когда пользователь нажимает на меню, у него уже есть фокус (так что оно видно внутри текущего окна просмотра). Но у вас есть очень большое верхнее изображение? Если это так, дайте мне знать, и я изменю фрагмент. (Тем не менее, это зависит от объема содержимого под меню, видимого при первой загрузке страницы.)
Кроме того, по SEO вы можете захотеть использовать href вместо атрибута rel и создавать отдельные страницы содержания. Следующий фрагмент удалит действие навигации.
$('#mainmenu a').each(function(){
var myhref = $(this).attr('href');
$(this).attr('href','#').attr('rel',myhref);
}).click(function(){
var myrel=$(this).attr('rel');
$('.content:not([id='+myrel+'])').hide();
//....etc
Другие советы
Мне кажется, это отличный пример того, что вы ищете: Органические вкладки р>
var imgVisible = true;
var $activeTab, $lastTab;
var $mainmenu = $('#mainmenu');
var offset = $mainmenu.offset().top - 20;
$mainmenu.find('a').click(function() {
$activeTab = $($(this).attr('rel'));
if (!imgVisible) {
// dont fire any events if already open
if ($lastTab.attr('id') == $activeTab.attr('id')) return false;
$lastTab.fadeOut('normal', function() {
$activeTab.fadeIn(500, function() {
$lastTab = $activeTab;
});
});
} else {
$('#imgholder').slideUp(500, function() {
imgVisible = false;
window.scrollTo(0, offset);
$activeTab.fadeIn(500, function() {
$lastTab = $activeTab;
});
});
}
return false;
});
Я настоятельно рекомендую добавить <a href="#">
, так как это не заставит страницу перескочить, когда все сделано правильно, и обеспечит проверку ваших якорных ссылок. Кто-то, дайте мне знать, если я что-то пропустил, это можно быстро решить (или вы можете сделать это для меня, если у вас есть оптимизация или улучшение).