Mostrar e ocultar itens de uma lista ordenada e mudar texto de h1 (JS)

Daiana Mowry · Março 7, 2013

Olá, preciso de uma ajuda. Estou desenvolvendo um portal imobiliário. Tenho na home uma seleção dinâmica de imóveis por cidade. Tenho um título. Preciso mudar esse título toda vez que clicar numa cidade diferente.

Problema 1:

<h1>Cidade em destaque: São Paulo</h1>. Esta cidade é default. Já tenho o arquivo JS. Falta agora implementar.

JS: (alterna_cidade.js)

function OpenSel(op) {
 
if (op == 1) {
document.getElementById('blocoSaoPaulo').style.display="block";
document.getElementById('blocoSalvador').style.display="none";
document.getElementById('RiodeJaneiro').style.display="none";



}else if (op == 2) {
document.getElementById('blocoSaoPaulo').style.display="none";
document.getElementById('blocoSalvador').style.display="block";
document.getElementById('RiodeJaneiro').style.display="none";



}else {
document.getElementById('blocoSaoPaulo').style.display="none";
document.getElementById('blocoSalvador').style.display="none";
document.getElementById('RiodeJaneiro').style.display="block";

}
}

home_destaque.php

<!--HOME destaque-->
  <div id="home_destaque" >
     <div id="destaque">
    
    <h1>Cidade em destaque: São Paulo</h1> // Aqui será mudada a cidade de acordo com a cidade selecionada
 
       <h2><a href="#" id="mostrar">[Mais cidades]</a></h2>
    
      <div id="cidades"><h3><strong>  <a style="cursor:pointer;" onclick="OpenSel(1);">São Paulo</a>
     
      <a style="cursor:pointer;" onclick="OpenSel(2)">Salvador</a> <a href="#">Rio de Janeiro</a> <a href="#">Curitiba</a><a href="#"> Belo Horizonte</a> <a href="#">Brasília</a><a href="#"> Recife</a> <a href="#">Fortaleza</a><a href="#"> Porto Alegre </a><a href="#">Florianópolis</a> </strong></h3></div>

  <?php include"Bloco_SaoPaulo.php";?>
   <?php include"Bloco_Salvador.php";?>
     
      
     </div><!--destaque-->
     </div><!--home navegar filtro-->

___x___

Problema 2

Preciso mostrar a descrição (div) toda vez que clicar no link visualizar descrição.

JS (descricao.js)

   $(document).ready(function(){
     $('#descricao h1').hide();
    
     $('#mostrar').click(function(event){
     event.preventDefault();
     $("#descricao h1").show();
     });
    
});

func_cidades.php

echo'<div id="descricao"><h1 id="mostrar">'.  $descricao . '</h1></div>';

O problema é que está numa li. Cada imóvel é um item de lista odernada. Eu quero que toda vez que clicar no link visualizar descrição exiba apenas a descrição daquele item. Todos a princípio devem estar ocultos.

Por favor, deem-me uma ajuda!

Aguardo um help. Obrigada a todos. Bom dia.

Snowden · Março 7, 2013

Assim não seria mais fácil ??

<!DOCTYPE html>
<head>
<meta charset="iso-8859-1">
<title>Cidades</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script>
$(document).ready(function(){
var New_title = "Cidade em destaque: ";
	
   $('#SP').click(function(event){
	event.preventDefault();
	document.title = New_title + $(this).text(); // muda o título da página ex: <title>Cidade em destaque: São Paulo</title>
		$('#cidade').html('<h1>' + New_title + $(this).text() + '</h1>'); // <h1>Cidade em destaque: São Paulo</h1>
		$('#descricao').load('Bloco_SaoPaulo.php'); // carrega a página com a descrição da cidade
   });
   $('#RJ').click(function(event){
    event.preventDefault();
	document.title = New_title + $(this).text(); // muda o título da página ex: <title>Cidade em destaque: Rio de Janero</title>
		$('#cidade').html('<h1>' + New_title + $(this).text() + '</h1>'); // <h1>Cidade em destaque: Rio de Janero</h1>
		$('#descricao').load('Bloco_RioDeJanero.php'); // carrega a página com a descrição da cidade
   });
   $('#PE').click(function(event){
    event.preventDefault();
	document.title = New_title + $(this).text(); // muda o título da página ex: <title>Cidade em destaque: Pernambuco</title>
		$('#cidade').html('<h1>' + New_title + $(this).text() + '</h1>'); // <h1>Cidade em destaque: Pernambuco</h1>
		$('#descricao').load('Bloco_Pernambuco.php'); // carrega a página com a descrição da cidade
   });
   
});
</script>
</head>
<body>
<div id="menu">
<ul>
  <li><a href="#" id="SP">São Paulo</a></li>
  <li><a href="#" id="RJ">Rio de Janero</a></li>
  <li><a href="#" id="PE">Pernambuco</a></li>
</ul>
</div>
<div id="cidade"></div>
<div id="descricao"></div>
</body>
</html>

Daiana Mowry · Março 7, 2013

function OpenSel(op) {

if (op == 1) {
document.getElementById('blocoSaoPaulo').style.display="block";
document.getElementById('blocoSalvador').style.display="none";
document.getElementById('RiodeJaneiro').style.display="none";

document.getElementById('destaque').getElementsByTagName("h1")[0].title = "Agora Mudou!!";

Eu só preciso adicionar essa linha de cima. Essa function já seleciona o link da cidade escolhida. É só pra mudar o texto que está no h1 da div destaque. Mas não está funcionando.

É algum detalhe.

Alguém pode me ajudar, por favor? Agradeço a ajuda de todos.

Snowden · Março 7, 2013

function OpenSel(op) {

if (op == 1) {

document.getElementById('blocoSaoPaulo').style.display="block";

document.getElementById('blocoSalvador').style.display="none";

document.getElementById('RiodeJaneiro').style.display="none";

document.getElementById("cidade_destaque").innerHTML = "Cidade em destaque: São Paulo";

}

</script>

<h1 id="cidade_destaque"> Cidade em destaque </h1>

Daiana Mowry · Março 7, 2013

Não deu certo.

Snowden · Março 8, 2013

fiz um teste e funciona perfeitamente!

<!DOCTYPE html>
<head>
<meta charset="iso-8859-1">
<title>Cidades</title>
<script>
function OpenSel(op) {
	switch(op){
		case 1:
		document.getElementById('blocoSaoPaulo').style.display="block";
		document.getElementById('blocoSalvador').style.display="none";
		document.getElementById('RiodeJaneiro').style.display="none"; 
		document.getElementById('cidade_destaque').innerHTML = "Cidade em destaque: São Paulo";
	break;
		case 2:
		document.getElementById('blocoSaoPaulo').style.display="none";
		document.getElementById('blocoSalvador').style.display="block";
		document.getElementById('RiodeJaneiro').style.display="none"; 
		document.getElementById('cidade_destaque').innerHTML = "Cidade em destaque: Salvador";
	break;
		case 3:
		document.getElementById('blocoSaoPaulo').style.display="none";
		document.getElementById('blocoSalvador').style.display="none";
		document.getElementById('RiodeJaneiro').style.display="block"; 
		document.getElementById('cidade_destaque').innerHTML = "Cidade em destaque: Rio de Janero";
	break;
		
	}
}
</script>
</head>
<body>
<!--HOME destaque-->
<div id="home_destaque" >
	<div id="destaque">
	<h1 id="cidade_destaque">Cidade em destaque</h1>
	<h2><a href="#" id="mostrar">[Mais cidades]</a></h2>
    
    <div id="cidades">
	<ul>
		<li><a href="#" onclick="OpenSel(1);">São Paulo</a></li>
		<li><a href="#" onclick="OpenSel(2);">Salvador</a></li>
		<li><a href="#" onclick="OpenSel(3);">Rio de Janero</a></li>
		<li><a href="#">Curitiba</a></li>
		<li><a href="#">Belo Horizonte</a></li>
		<li><a href="#">Brasília</a></li>
		<li><a href="#">Recife</a></li>
		<li><a href="#">Fortaleza</a></li>
		<li><a href="#">Porto Alegre</a></li>
		<li><a href="#">Florianópolis</a></li>
	</ul>
	  </div>

	<?php include"Bloco_SaoPaulo.php";?>
	<?php include"Bloco_Salvador.php";?>
		
		<!-- TESTE -->
		<br />
		<div id="blocoSaoPaulo" style="display:none">Conteúdo de São  paulo</div>
		<div id="blocoSalvador" style="display:none">Conteúdo de Salvador</div>
		<div id="RiodeJaneiro" style="display:none">Conteúdo do Rio de janero</div>
		<!-- FIM TESTE -->
		
    </div><!--destaque-->
</div><!--home navegar filtro--> 
</body>
</html>

Daiana Mowry · Março 8, 2013

O h1 não muda.

Snowden · Março 8, 2013

no seu arquivo "alterna_cidade.js"

ao invés de usar "if (op == 1) {.." Use "switch(op){ case 1: ..."

más....!!! se não quiser mudar seu JS.

faça assim no link de cada cidade..

<a href="#" onclick="OpenSel(1);document.getElementById('cidade_destaque').innerHTML='Cidade em destaque: São Paulo';">São Paulo</a>

não esqueça de por o ID na tag H1

<h1 id="cidade_destaque">Cidade em destaque</h1>

Arquivado

Mostrar e ocultar itens de uma lista ordenada e mudar texto de h1 (JS)

Recommended Posts

Daiana Mowry 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Snowden 94

Compartilhar este post

Link para o post

Compartilhar em outros sites

Daiana Mowry 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Snowden 94

Compartilhar este post

Link para o post

Compartilhar em outros sites

Daiana Mowry 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Snowden 94

Compartilhar este post

Link para o post

Compartilhar em outros sites

Daiana Mowry 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Snowden 94

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante