Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

vonzuben

Como colocar link e chamar o conteudo ?

Por , em Desenvolvimento frontend

Recommended Posts

vonzuben    12

vonzuben
Postado

Veja o exemplo aqui tem as abas mas não funciona.

 

http://www.brunodulcetti.com/artigos/menu_...menu_abas.html#

 

 

Como fazer para o menu 2 e linkar seu conteudo ?

 

ex:

 

menu 1 link seu conteudo 1

menu 2 link seu conteudo 2

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="estilo.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="geral">
<ul class="menu">
<li class="on"><a href="#">Menu 01</a></li>
<li><a href="#">Menu 02</a></li>
<li><a href="#">Menu 03</a></li>
</ul>
<div id="conteudo">Conteúdo do seu site</div>
</div>
</body>
</html>

.css

* { margin: 0; padding: 0; }

body {
text-align: center;
margin-top: 10px;
padding-top: 10px;
font: bold 0.65em “Trebuchet MS”, Verdana, Arial, _sans, times;
}

a { font-weight: bold; color: #454545; }
a:hover { text-decoration: none; color: #666666; }

#geral {
margin: auto;
width: 450px;
}

#conteudo {
border: 1px solid #9C5E40;
border-top: 0;
height: 170px;
background: #DEED92;
padding: 10px;
text-align: left;
}

/* ESTILO DO MENU */
ul.menu {
list-style: none;
height: 21px;
background: url(fundoLinha.gif) repeat-x left bottom;
}

ul.menu li {
float: left;
width: 104px;
height: 21px;
line-height: 21px;
text-align: center;
background: url(aba_inativa.gif) no-repeat;
}

ul.menu li.on { background: url(aba_ativa.gif) no-repeat; }

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

Javascript, pesquise por menu em abas no fórum de javascript que provavelmente você encontrará a resposta ;)

 

[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

Aprendiz CSS    3

Aprendiz CSS
Postado

Você pode fazer vai ajax!!!

 

ou pode fazer via ajax, ou recarregar toda a página..

 

que metodo que usar?

 

abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

Não precisa de ajax, só javascript já é suficiente

Compartilhar este post

Link para o post
Compartilhar em outros sites

Aprendiz CSS    3

Aprendiz CSS
Postado

vonzuben

 

você sabe trabalhar com display das divs?

 

alterar de none para block?

 

caso saiba nesse site foi isso que foi feito!

 

se tiver dúvidas quanto a isso

 

informe qual a sua dúvida que eu te ajudo com um exemplo simples disso!

 

abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

vonzuben    12

vonzuben
Postado

Manda um exemplo simples, pois o que não estou entendo como é que ele chama o conteudo, tipo clicando em menu 1 chama o conteudo1, clicando em menu 2 chamava o conteudo 2 e assim sucesivamente.

 

pois esse de cima não está linkado, chamando o conteudo, onde só tem o conteudo no menu 1, pois gostaria de clicar no menu 2 e chmar o conteudo 2

 

entende ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

T.Colucci    33

T.Colucci
Postado

Cada aba dessa é uma div diferente, que deve ter o conteudo vindo de uma consulta ao banco de dados.

 

Como já foi dito, com o css e javascript você faz isso tranqüilo...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

Baixe a biblioteca jQuery, inclua no seu head, e faça assim:

 

java script:

 

var tabAtual = 1;

mudarTab = function(numeroTab) {
	 $("#tab_"+tabAtual).toggle();
	 $("#tab_"+numeroTab).toggle();
	 tabAtual = numeroTab;

	 return false;
}

HTML:

 

<div id="tabs">
<a href="#tab_1" onclick="mudarTab(1)">Tab 1</a>
<a href="#tab_2" onclick="mudarTab(2)">Tab 2</a>
<a href="#tab_3" onclick="mudarTab(3)">Tab 3</a>
<a href="#tab_4" onclick="mudarTab(4)">Tab 4</a>
<div id="tab_1">conteudo tab 1</div>
<div id="tab_2" style="display:none">conteudo tab 2</div>
<div id="tab_3" style="display:none">conteudo tab 3</div>
<div id="tab_4" style="display:none">conteudo tab 4</div>
</div>

 

Nota: o código ainda pode ser melhorado para ficar não-obstrutivo e mais DRY

 

OBS: pode incluir o jQuery direto do Google Apis:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>

 

[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

vonzuben    12

vonzuben
Postado

surgiu um probleminha

 

fiz aqui e deu certo conforme o link abaixo

 

http://www.suprilaser.com.br/menu.html#

 

 

Agora coloquei o codigo na pagina em .asp dentro de um tabela aonde vai a descrição e não funcionou, pois quando clica no link leva para o topo e tb não cham o conteudo.

 

ASP:

 

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
</head>

<script language=javascript>
var tabAtual = 1;

mudarTab = function(numeroTab) {
	 $("#tab_"+tabAtual).toggle();
	 $("#tab_"+numeroTab).toggle();
	 tabAtual = numeroTab;

	 return false;
}
</SCRIPT>

EXEMPLO COMO ESTÁ DENTRO DA TABELA

  <td colspan="3"><div id="tabs">
<ul class="menu">
<li class="menuabas"><a href="#" onclick="mudarTab(1)">Menu 01</a></li>
<li class="menuabas"><a href="#" onclick="mudarTab(2)">Menu 02</a></li>
<li class="menuabas"><a href="#" onclick="mudarTab(3)">Menu 03</a></li>
</ul>
<div id="tab_1" class="conteudo">
Tipo de Impressora: Impressora laser 
Comunicação: Pora USB 2.0 de alta velocidade
Velocidade em preto: Até 15 ppm em tamanho carta
Resolução Max: Até 400x600 dpi (saída eficiente de 600 dpi)
Memória: 2 MB integrados em pacote SIP, NVRAM de 16k bit
Ciclo mensal Até 5.000 páginas
Cartucho: preto 
</div>
<div id="tab_2" class="conteudo" style="display:none">
Sistema Operacional/Sistema Operacional de rede: Conectividade de série: Hi-Speed USB (compatível com as especificações USB 2.0), Sistemas operativos compatíveis: Microsoft Windows 2000, XP Home, XP Professional, XP Professional x64, Server 2003 (32/64 bit); Certificado para Windows Vista; Mac OS X v10.3.9, v10.4 ou superior.
</div>
<div id="tab_3" class="conteudo" style="display:none">
Contéudo da embalagem: Impressora HP LaserJet P1005, cartucho de impressão introdutório HP LaserJet (a produção média do cartucho é de 700 páginas normais), Guia de introdução, documentação da impressora e software em CD-ROM, folheto de assistência, cabo de alimentação 
</div>
</div></td>

CSS:

 

/* MENU ABAS */
* { margin: 0; padding: 0; }


.menuabas { font-weight: bold; color: #454545; }
.menuabas:hover { text-decoration: none; color: #666666; }

#tabs {
margin-left: 10px;
width: 650px;
}

.conteudo {
border-top: 0;
height: 170px;
background: #FFFFFF;
margin-top: 10px;
margin-left: 5px;
}

/* ESTILO DO MENU */
ul.menu {
list-style: none;
height: 21px;
}

ul.menu li {
float: left;
width: 104px;
height: 21px;
line-height: 21px;
text-align: center;
background: url(../layout/img/aba_inativa.gif) no-repeat;
}

ul.menu li.on { background: url(../layout/img/aba_ativa.gif) no-repeat; 
}

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito