Ir para conteúdo

POWERED BY:

Arquivado

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

Rafael.Andrade

[Resolvido] Alterar formatação dependendo da URL

Por , em Javascript

Recommended Posts

Rafael.Andrade    0

Rafael.Andrade
Postado

Pessoal, sou novo aqui no fórum mas tenho uma paixão enorme por programação.

 

É o seguinte, tenho 1 iFrame em uma página no meu site, ele é um menu de um tutorial que estou fazendo de 1 programa, nesse menu é exibido partes do tutorial, queria colocar um código javascript que verifica se o link do primeiro item é igual a URL da página, se for igual formata como negrito, se for diferente deixa sem negrito (que é o padrão)

 

Exemplificando:

 

Ao carregar o Tutorial ficará por padrão assim: (o javascript sempre verificando)

 

1. Gravando um DVD para ISO (Página Atual)

2. Gravando ISO para DVD-R ou RW.

3. Clonando DVD.

 

Se a pessoa clicou no item 2 o menu passaria a ficar assim quando a página carregasse:

 

1. Gravando um DVD para ISO

2. Gravando ISO para DVD-R ou RW. (Página Atual)

3. Clonando DVD.

 

Se depois a pessoa clicasse no 3 ficaria assim:

 

1. Gravando um DVD para ISO

2. Gravando ISO para DVD-R ou RW.

3. Clonando DVD. (Página Atual)

 

Entendeu???

 

Sei que para capturar a url é o comando window.location.href que deve ser armazenado numa variável, a estrutura de java eu sei, mas estou com dificuldade e nem sei por onde começar pois há lacunas como não sei comandos de formatação para usar no java e coisas do tipo.

 

Agradeço pela força

 

Abração

 

Rafael

Compartilhar este post

Link para o post
Compartilhar em outros sites

Lucas Guima    164

Lucas Guima
Postado

Fiz um script aqui, mas não atinei como resetar... :(

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
	$("a").click(function(){
		link = $(this).html();
		$(this).html(link.bold());
	});
});
</script>
<a href="#link1">Link #1</a><br />
<a href="#link2">Link #2</a><br />
<a href="#link3">Link #3</a>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rafael.Andrade    0

Rafael.Andrade
Postado

Fiz um script aqui, mas não atinei como resetar... :(

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
	$("a").click(function(){
		link = $(this).html();
		$(this).html(link.bold());
	});
});
</script>
<a href="#link1">Link #1</a><br />
<a href="#link2">Link #2</a><br />
<a href="#link3">Link #3</a>

Tem como explicar o código, onde devo exatamente alterar?

 

Em CSS seria melhor maninho... :)

 

hehe, maninho é dahora, rsrsrs

Nunca usei CSS na minha vida e quando tentei entender aí que eu não entendi nada mesmo, rsrsrs, você sabe fazer um código aí e explicar????

 

flw, vlw pessoal

Compartilhar este post

Link para o post
Compartilhar em outros sites

visitante_xp    0

visitante_xp
Postado

Bom, CSS só vai servir se você quiser fazer tipo um sistema de abas...

 

Dependendo, da até pra fazer com tabelas.

 

Como deveria ser o resultado final?

 

Seria como uma serie de titulos, um do lado do outro?

Como vai ser a troca depaginas, o usuario vai clicar num botão "Avançar" ou vai clicar na parte do tutorial que deseja ver?

 

Conforme for, o javascript entra em ação da seguinte forma:

 

Usuario clica em um botão avançar: você pode colocar uma sequencia de páginas, assim no botão pode ter um identificador para que na proxima pagina uma variavel TAL possa ser ativada.

 

Usuario clina na parte do link que deseja ver: O java ve o link em questão e da um bold, mas lembre que tem que tirar o bold do link anterior, pode seguir o exemplo do @Lucas.

 

Fala melhor de como você quer o resultado final. Da um print de um exemplo qualquer...^^

 

Flw "maninho"... ^_^

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rafael.Andrade    0

Rafael.Andrade
Postado

Dá uma olhada nesse tutorial que eu fiz, como eu não tinha conhecimento de programação na época eu alterei o menu em cada página:

http://www.truquesemacetes.com/html/tutoriais/nero/nero_express.htm

 

É daquele jeito que eu quero que fique, só que o menu estará numa iFrame e o código fará o resto do serviço.

 

Vlw pela força...

Compartilhar este post

Link para o post
Compartilhar em outros sites

visitante_xp    0

visitante_xp
Postado

Olha só maninho, consegui fazer com div mas com iframe eu não consegui...

 

Ve se isso da pra quebra um galho... ^_^

 

<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
a:link{text-decoration:none; color:#000;}
a:visited{text-decoration:none; color:#000;}
</style>
<script language="javascript">

function AbreCont(op) {

	if (op == 1) 
	{
		document.getElementById('1').style.display="block";
		document.getElementById('2').style.display="none";
		document.getElementById('3').style.display="none";
		
		document.getElementById('con1').style.fontWeight="bold";
		document.getElementById('con2').style.fontWeight="normal";
		document.getElementById('con3').style.fontWeight="normal";
	}
	else if (op == 2) 
	{
		document.getElementById('1').style.display="none";
		document.getElementById('2').style.display="block";
		document.getElementById('3').style.display="none";
		
		document.getElementById('con1').style.fontWeight="normal";
		document.getElementById('con2').style.fontWeight="bold";
		document.getElementById('con3').style.fontWeight="normal";
	}
	else if (op == 3) 
	{
		document.getElementById('1').style.display="none";
		document.getElementById('2').style.display="none";
		document.getElementById('3').style.display="block";
		
		document.getElementById('con1').style.fontWeight="normal";
		document.getElementById('con2').style.fontWeight="normal";
		document.getElementById('con3').style.fontWeight="bold";
	}
}
</script>
</head>
<body>
<ul>
<li><a href="#" id="con1" onclick="AbreCont(1);">1. Gravando um DVD para ISO (Página Atual).</a></li>
<li><a href="#" id="con2" onclick="AbreCont(2);">2. Gravando ISO para DVD-R ou RW.</a></li>
<li><a href="#" id="con3" onclick="AbreCont(3);">3. Clonando DVD.</a></li>
</ul>

<div id="1" style="display:none;">Conteudo 1</div>

<div id="2" style="display:none;">Conteudo 2</div>

<div id="3" style="display:none;">Conteudo 3</div>
</body>
</html>

Espero ter ajudado.

 

Abraço!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rafael.Andrade    0

Rafael.Andrade
Postado

Fiz com base no seu exemplo (ralei que nem um lazarento) mas consegui, como o IF é uma condicional retirei todos aqueles códigos que faziam os outros itens ficarem sem bold pois ao dar refresh é feita uma nova verificação, eis o código abaixo:

 

<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
a:link{text-decoration:none; color:#000;}
a:visited{text-decoration:none; color:#000;}
</style>

<script language="javascript">

function AbreCont() {
var dom=parent.document.location.href; //Pega o url da página pai
var link1="test.htm";
var link2="test2.htm";

	if (dom.indexOf(link1)>=0) //Verifica se a página pai é a test.htm
	{
		document.getElementById('con1').style.fontWeight="bold"; //Torna o item com o ID "con1" em Negrito
	}
	else if (dom.indexOf(link2)>=0) //Verifica se a página pai é a test2.htm
	{
		document.getElementById('con2').style.fontWeight="bold"; //Torna o item com o ID "con2" em Negrito
	}
}
</script>

<base target="_top">

</head>

<body onload="AbreCont()">
<a href="http://www.truquesemacetes.com/test.htm" id="con1">1. Gravando um DVD para ISO.</a>
<br><a href="http://www.truquesemacetes.com/test2.htm" id="con2">2. Gravando ISO para DVD-R ou RW.</a>
<br><a href="#" id="con3">3. Clonando DVD.</a>

</body>

</html>

Descobri que para pegar o URL da página pai é o comando parent.document.location.href, procurei na net por esse comando que foi uma dureza, rsrsrs

 

Muitííííííííííííííííííííííííííííííííssssimo Obrigado para vcs 2, ajudaram e muito, sem vcs não teria conseguido.

 

flw

Compartilhar este post

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

Informação importante

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

  Aceito