Melhor abordagem para a tela deslizante e guias com jQuery
-
08-07-2019 - |
Pergunta
Estou criando uma página com uma imagem na parte superior, e um menu abaixo. Quando o usuário clica em um dos botões do menu 3, a imagem slideUp e a página é deslocada para baixo para que o menu está no topo da página, depois a direita desaparece .content div. O slideUp só deve acontecer a primeira vez que o usuário clica em um dos botões.
O que a melhor maneira absoluta de fazer isso com jQuery? (sem plugins)
Eu também preciso saber como eu não posso impedi-lo a desvanecer-se na página que já é visível se eu clicar no mesmo botão duas vezes?
Eu estou usando rel em vez de href , uma vez que a href fez o salto de página, mesmo com retorno false .
Isto é o que eu tenho até agora:
<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>
Solução
O código a seguir realiza o que você precisa:
$('#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>
Eu removi o sinal '#' do seu rel = '' peça; -)
Não estou certo por que você quer para rolar a página. Quando um usuário clica no menu, ele / ela já tem focado (por isso é visível dentro da janela de visualização atual). Mas você tem uma imagem de cima muito grande? Se for esse o caso, deixe-me saber e eu vou modificar o trecho. (Ainda assim, isso depende da quantidade de conteúdo abaixo do menu visível quando a página é carregada pela primeira vez.)
Além disso, para SEO razões que você pode querer usar a href em vez do atributo rel e criar páginas de retenção de conteúdo separados. O seguinte trecho iria remover a ação de navegação.
$('#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
Outras dicas
Eu acho que este é um grande exemplo do que você está procurando: Tabs orgânicos
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;
});
Eu sugiro acrescentando <a href="#">
como isso não vai fazer o salto página quando feito corretamente e irá garantir a validação em seus links de ancoragem. Alguém me avise se eu perdi alguma coisa, ele pode ser resolvido rapidamente (ou você pode fazê-lo para mim se você tem uma otimização ou melhoria).