Ir para conteúdo

POWERED BY:

Arquivado

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

Doebber

Menu com Abas

Por , em Javascript

Recommended Posts

Doebber    0

Doebber
Postado

alguem sabe um script que muda o nome da class em uma div?

 

tpw <div class="desativado"> ai quando clica fica assim <div class="ativado">

 

alguem?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Daniel-DF    0

Daniel-DF
Postado

Usar jquery apenas pra isso não sei se vale a pena pelo tamanho da biblioteca, mas segue uma alternativa:

<html>
<head>
<style type="text/css" media="all">
.ativado{
color:blue;
}
.desativado{
color:red;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready( function(){
	$('#chave').click(function(){
	var $this = $(this);
	var valor = $this.attr('class');
		if(valor=='ativado'){
		$this.attr('class', 'desativado');
			}else{
			$this.attr('class', 'ativado');
			}
	});
});
</script>
</head>
<body>

<div id="chave" class="ativado">liga/desliga</div>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Doebber    0

Doebber
Postado

mas se o menu for maior n funfa.

ai o menu

<div id="menu">
                        <div id="chave" class="ativado">
                            <a href="#" title="">Menu1</a>
                        </div>
                        <div id="chave" class="desativado">
                            <a href="#" title="">Menu2</a>
                        </div>
                        <div id="chave" class="desativado">
                            <a href="#" title="">Menu3</a>
                        </div>
                        <div id="chave" class="desativado">
                            <a href="#" title="">Menu4</a>
                        </div>
                        <div id="chave" class="desativado">
                            <a href="#" title="">Menu5</a>
                        </div>
                        <div id="chave" class="desativado">
                            <a href="#" title="">Menu6</a>
                        </div>

</div>
assim tem como mudar?

quando clica no menu2 ai o menu1 muda pra desativado e o menu2 pra ativado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Daniel-DF    0

Daniel-DF
Postado 

<html>

<head>

<style type="text/css" media="all">

.ativado{

color:blue;

}

.desativado{

color:red;

}

</style>

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

<script type="text/javascript">

$(document).ready( function(){

 

$('#menu li').click(function(){

 

var $this = $(this);

var valor = $this.attr('class');

$('#menu li').attr('class', 'desativado');

if(valor=='ativado'){

$this.attr('class', 'desativado');

}else{

$this.attr('class', 'ativado');

}

});

 

});

</script>

</head>

<body>

 

<ul id="menu">

<li class="ativado">

<a href="#" title="">Menu1</a>

</li>

<li class="desativado">

<a href="#" title="">Menu2</a>

</li>

<li class="desativado">

<a href="#" title="">Menu3</a>

</li>

<li class="desativado">

<a href="#" title="">Menu4</a>

</li>

<li class="desativado">

<a href="#" title="">Menu5</a>

</li>

<li class="desativado">

<a href="#" title="">Menu6</a>

</li>

 

</ul>

 

</body>

</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado

Só uma coisa, mude isto:

$('ul li')

Por isto:

$('ul li a')

Depois, no css, coloque:

ul li a {
 display: block;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Daniel-DF    0

Daniel-DF
Postado

Dei uma melhorada no código para nao desativar o menu ativo, caso ele seja clicado novamente e acrecentei a recomendação do Rick.hjpbarcelos

 

 

<html>
<head>
<style type="text/css" media="all">
.ativado{
color:blue;
}
.desativado{
color:red;
}
ul li a {
 display: block;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready( function(){
var $menu = $('#menu li a');

	$menu.click(function(){
	var $this = $(this);
	var valor = $this.attr('class');	
		if(valor=='desativado'){
			$menu.attr('class', 'desativado');
			$this.attr('class', 'ativado');
			}

	});

});
</script>
</head>
<body>

<ul id="menu">
 	<li>
 	<a href="#" title="" class="ativado">Menu1</a>
 	</li>
								<li>
									<a href="#" title="" class="desativado">Menu2</a>
								</li>
 	<li>
 	<a href="#" title="" class="desativado">Menu3</a>
 	</li>
 	<li>
 	<a href="#" title="" class="desativado">Menu4</a>
 	</li>
 	<li>
 	<a href="#" title="" class="desativado">Menu5</a>
 	</li>
 	<li>
 	<a href="#" title="" class="desativado">Menu6</a>
 	</li>

</ul>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Doebber    0

Doebber
Postado

funciona quando n abre o link pq quando abre zera td d novo e fica td desativado os link.

quando clica ele muda e volta pro menu1 o ativado.

e dai?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Daniel-DF    0

Daniel-DF
Postado

funciona quando n abre o link pq quando abre zera td d novo e fica td desativado os link.

quando clica ele muda e volta pro menu1 o ativado.

e dai?

 

Isso so vai funcionar como você ta falando se for carregar o conteúdo com ajax.

Existem opções com css também pra isso.

coloca seu código aqui pra analisar.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Doebber    0

Doebber
Postado

n sei nada de ajax

mas to usando php.

 

o index.php é assim

<?php include "ars_header.inc.php";?>
<?php include "ars_menu.inc.php";?>
<?php include "ars_content.inc.php";?>
tpw fiz assim pq uso o mesmo header e mesmo menu em todas paginas.

pra exclarece o content é assim

<?php
if (!$_GET[paginas] || !file_exists ("paginas/".$_GET[paginas].".php")) {
   include ("paginas/home.php");
} else {
   include ("paginas/".$_GET[paginas].".php");
}
?>
e conteudo dos link é chamado dentro da index com o link assim

index.php?pagina=contato
ai o conteudo da pagina contato abre na index axo que da pra entender como é.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Doebber    0

Doebber
Postado

o problema é que abre como se fosse nova pagina n tem um script que alem de muda a class,

altera ela no arquivo do menu e salva ate clica de novo e assim por diante?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Daniel-DF    0

Daniel-DF
Postado

Com php tem como fazer isso utilizando sessões.

Sessões armazenam valores ate que o browser seja fechado.

Com isso você pode criar condiçoes com if's para alterar os valores delas de acordo com a necessidade.

 

Dá uma olhada no forum de php e veja se tem algo parecido com sua questão.

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