Ir para conteúdo

POWERED BY:

Arquivado

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

jcvilanova

Acessar determinado elemento de uma Div com Jquery

Por , em Desenvolvimento frontend

Recommended Posts

jcvilanova    0

jcvilanova
Postado

Bom dia! pessoal,

 

estou tentando aprender HTML, CSS E JQuery pra criar minha pagina na internet. Na minha primeira página (Index) optei por dividir em quatro DIVs, sendo o #cabeçalho, Div #lateraldireita, Div #principal (fica ao centro mas ao lado da lateral) e a Div #rodapé. Bem, com exceção do cabeçalho, coloquei outras Divs dentro de todas as demais pra que nelas eu possa colocar slides de textos e imagens, botoes etc. Tenho os seguintes documentos: Index.html, Estilos.css e 05.js. O arquivo 05 faz parte do mini curso de JQuery que peguei na internet.

Acontece que nenhum dos exemplos de seleteres que tentei usar funcionaram. Por exemplo, eu criei um link (tag a) com ID= Sloganroda, onde ao clicar um H3 que está dentro da Div #rodapé deveria mudar de cor. Mas ao clicar no link, nada acontece. Alias, percebi que o proprio link muda de cor e volta a sua cor normal rapidamente. Gostaria da ajuda de voces pra entender porque nao esta dando certo.

 

Ai estao as estruturas dos meus arquivos .css, .js e .html.

 

Index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="Estilo.css" media="screen"/>
<script type="text/javascript" src="domine/jquery-1.12.4.js"</script>
<script type="text/javascript" src="domine/05.js"></script>
<title>Css</title>
</head>
<body>
<div id="conteudo">
<div id="header">
<ul>
<li><a href="Home.html">Home</a></li>
<li><a href="Quemsomos.html">Quem Somos</a></li>
<li><a href="Parceiros.html">Parceiros</a></li>
<li><a href="Portifólio.html">Portifólio</a></li>
<li><a href="Contato.html">Contato</a></li>
<hr size=2 width=662 >
</ul>
<h1> MEU HEADER</h1>
<p id="slogandoheader"> Meu Slogan Aqui</p>
</div>
<div id="barralateral">
<div id="barlateralcentro">
<h2> Barra Lateral</h2>
<p> Esta é a div da lateral esquerda do site </p>
</div>
</div>
<div id="principal">
<div id="barprincipalcentro">
<h2> Principal</h2>
<p> teste da minha primeira div</p>
</div>
</div>
<div id="rodape">
<h3> Aqui Fica o Meu Rodapé </h3>
<a id="teste" href="#">... Mudar ... </a>
</div>
</div>
</body>
</html>
Estilos.css
@charset "utf-8";
/* CSS Document */
#conteudo {
border: 1px solid red;
height:900;
margin:0 auto;
background:url(Plano-de-Fundo.png)
}
h2 { margin:0 auto;
}
h1 { margin:0 auto;
}
#header {
margin: 20px 0px 0 15px;
padding: 11px;
height: 120px;
background-image: url(Logo_pre.png), -webkit-gradient(linear, 100.00% 50.87%, 0.00% 49.13%, color-stop( 0% , rgba(39,122,191,1.00)),color-stop( 100% , rgba(255,0,0,0.09)));
background-image: url(Logo_pre.png), -webkit-linear-gradient(179deg,rgba(39,122,191,1.00) 0%,rgba(255,0,0,0.09) 100%);
background-image: url(Logo_pre.png), linear-gradient(271deg,rgba(39,122,191,1.00) 0%,rgba(255,0,0,0.09) 100%);
background-repeat: no-repeat;
}
#slogandoheader {
margin:200px 100;
}
#barralateral {
background-color: #FFFBF0;
width: 250px;
height:380px;
padding:11px;
float:left;
}
#barlateralcentro {
background-color: #F00;
position:relative;
float: left;
margin: 50 10 50 10;
width: 230px;
height:360px;
padding:11px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;}
#principal {
background-color: #FF5;
position:relative;
padding-left:11px;
width: 1035px;
height:402px;
float:left;
margin-right:0;
}
#barprincipalcentro {
background-color: #F00;
position:relative;
margin: 11px 0px 0 0;
width: 1000px;
height:360px;
padding-top:20px;
padding-left:11px;
padding-right:15px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;}
#rodape {
background-color:black;
color:white;
clear:both;
padding:11px;
}
ul {
position:absolute;
top: 100px;
float:right;
left:600px;; }
ul li {
list-style-type: none;
display: inline;
padding: 5px 40px 5px 40px;
text-decoration: none;
font-family: "Trebuchet MS", Arial, Helvetica, Sans Serif;
font-size: 12px;
color: #3FC;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background-image: -webkit-gradient(linear, 100.00% 50.87%, 0.00% 49.13%, color-stop( 0% , rgba(255,255,255,0.02)),color-stop( 55.96% , rgba(16,103,159,0.54)),color-stop( 95.34% , rgba(243,244,245,0.44)));
background-image: -webkit-linear-gradient(179deg,rgba(255,255,255,0.02) 0%,rgba(16,103,159,0.54) 55.96%,rgba(243,244,245,0.44) 95.34%);
background-image: linear-gradient(271deg,rgba(255,255,255,0.02) 0%,rgba(16,103,159,0.54) 55.96%,rgba(243,244,245,0.44) 95.34%);
}
ul li a {
list-style-type: none;
text-decoration: none;
color:#000;
}
hr {
color:#999;
}
05.js
$(document).ready(function() {
$("sloganroda").css("color", "yellow");
});

Compartilhar este post

Link para o post
Compartilhar em outros sites

L. Henrique    179

L. Henrique
Postado

Jcvilanova,

Sua questão está bem complicada de entender, primeiro vamos esclarecer algumas coisas pra ver se consigo te ajudar...

Você tem um rodapé e nele constam dois elementos: H3 e Anchor ("tag a"). O que você quer é clicar no H3 e fazer com que o anchor mude de cor? Ou ao passar o mouse sobre o H3 ele mesmo altera de cor?

 

Se você quer que o seu H3 mude de cor quando o mouse passar por cima, faça o seguinte:

.classe_do_h3:hover {
  color: red; 
}

Se você quer que ele mude de cor após um clique:

.classe_do_h3:active {
   color: red;
}

Esses dois métodos você consegue fazer tranquilamente com o próprio CSS. Lembrando que o seu 05.js não faz sentido. Porquê você quer adicionar uma cor ao anchor através do JS, se você simplesmente pode fazer isso via CSS e evitar uma requisição a outro arquivo???

 

Bem, se você quiser passar o mouse no H3 e fazer com que o anchor mude de cor, então entraria JS/jQuery. Veja um exemplo:

$('.classe_do_h3').hover(function() {
   $('#sloganroda').css('color', 'yellow');
});

Sempre que você for referenciar um ID dentro do jQuery, é necessário que antes dele tenha a cerquilha (hashtag #). Da mesma forma que você estrutura as classes no CSS como por exemplo: .classe ou #id, será essa a mesma forma que utilizará quando usar jQuery.

 

O método .hover você pode substituir por .click - bem, os nomes são auto-explicativos.

Abraços!

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