Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Se alguem puder me ajudar, eu fiz um menu, só que ele não funciona, eu queria que quando eu clica-se em uma opção ele funciona-se. ex: eu clico na opção Sonic, queria que ao clicar nessa opção ele mudasse o fundo de uma div e o texto de outra. Será que alguem poderia me ajudar?
eu to fazendo em html. não tem como fazer por html ? é um site básico para trabalho de Faculdade. segue o codigo abaixo (sem as CSS).
<html>
<head>
<meta charset="utf-8"/>
<title>3 GAMES CLASSICOS</title>
<style type="text/css" media="all">@import "corpo.css";</style>
</head>
<body>
<div id="topo"><p class="SuperMarioBros-font">3 GAMES CLASSICOS</p></div>
<nav id="menu">
<ul>
<li><a href="#">Home</a>
</li>
<li><a href="#">Super Mario Bros</a>
</li>
<li><a href="#">Sonic</a>
</li>
<li><a href="#">Pac-Man</a>
</li>
<li><a href="#">Sobre</a>
</li>
</ul>
</nav>
<div id="content">
<div class="padding"> <b>Considerado um clássico, Super Mario Bros. foi um dos primeiros jogos de plataforma com rolagem lateral,
recurso conhecido em inglês como side-scrolling. O jogo foi o mais vendido de toda a história dos videogames
(contando-se aí os jogos vendidos junto com os consoles) com mais de 40 milhões de cópias e foi o
principal responsável pelo sucesso inicial do console NES (Famicom, no Japão).<br><br>Desenvolvedora: Nintendo Creative Department<br><br>Data de Lançamento:13 de setembro de 1985</b></div></div><br>
<div id="header"></div>
<div id="footer">Copyright 2017 © Carlos Alberto Silverio Junior - Turma BSI 8 - <a href="http://www.fortec.edu.br">FATEF</a></div>
</body>
</html>Desculpa vi num exemplos aqui está o q você fez certo. mas queria saber onde eu coloco isso e se tem alguma css ?
>
Em 07/09/2017 at 00:01, luiz14 disse:
Você pode fazer com javascript da seguinte forma:
<script>
function teste(){
var teste1 = document.getElementById("teste1");
var teste2 = document.getElementById("teste2");
teste1.style.background = "black";
teste2.value= "teste";
}
</script>
<div onclick="teste()">Sonic</div>
Se não for isso, coloque o seu código aqui.
Já coloquei meu código. Ali onde tem o menu eu queria que ao selecionar uma opção mudasse o content (que seria o texto) e que mudasse o header(que seria o plano de fundo dessa div) e quando postar o código puder me dizer onde coloco e se tem alguma css.Posta seu código css.
>
27 minutos atrás, gianp disse:
Posta seu código css.
segue o codigo css. programa acima.
body {
margin: 0;
padding: 0;
background: url("Fundo.jpg");
background-size: cover;
}
#menu ul{
width: 985px;
padding:0px;
margin: 20;
font-size:20;
background-color:seagreen;
list-style:none;
height: 30px;
}
#menu ul li{
display: inline;
}
#menu ul li a{
padding: 2px 10px;
display: inline-block;
background-color:seagreen;
color:white;
text-decoration: none;
border-bottom: 3px solid seagreen;
}
#menu ul li a:hover{
background-color:white;
color:seagreen;
border-bottom:3px solid white;
}
#content {
float: right;
width: 472px;
margin: 20;
font-size:17px;
text-align:justify;
color:black;
font-family:Times new roman;
border:5px solid seagreen;
background:white;
height: 300px;
margin-top:-20px;
margin-right:19px;
}
#content .padding {
padding: 20px;
line-height: 20px;
}
#topo{
width: 985px;
margin: 20;
font-family:Mario Bros;
color:yellow;
text-shadow: black 0.2em 0.2em 0.3em;
text-align:center;
letter-spacing:30px;
font-size:35px;
height: 60px;
}
@font-face{
font-family:"Super Mario Bros.";
src:url("Super_Mario_bros_/SuperMarioBros.ttf")format("truetype");
}
.SuperMarioBros-font{
font-family:"Super Mario Bros.";
}
#header {
width: 400px;
margin: 20;
font-size:30;
background: url("SuperMariobrosClassico.jpg");
background-size: cover;
height: 200px;
}
#footer {
position: fixed;
bottom: 0;
width: 100%;
font-weight: bold;
text-align: center;
color: lightcyan;
}
#footer a {
color: lightcyan;
text-decoration: none;
}
#footer a:hover {
color:royalblue;
}No caso seria assim:
.menu li a{
color:#C0C0C0;
text-decoration:none;
padding:5px 10px;
display:block;
transition: all 1s;
}
.menu li a:hover {
transition: all 1s;
box-shadow: inset 0 -1px 0 rgb(31,141,237);
color: #A9A9A9;
}>
Agora, gianp disse:
No caso seria assim:
.menu li a{
color:#C0C0C0;
text-decoration:none;
padding:5px 10px;
display:block;
transition: all 1s;
} transition: all 1s;
box-shadow: inset 0 -1px 0 rgb(31,141,237);
color: #A9A9A9;
}>
54 minutos atrás, gianp disse:
No caso seria assim:
.menu li a{
color:#C0C0C0;
text-decoration:none;
padding:5px 10px;
display:block;
transition: all 1s;
}
.menu li a:hover {
transition: all 1s;
box-shadow: inset 0 -1px 0 rgb(31,141,237);
color: #A9A9A9;
}
onde eu coloco isso, e preciso editar alguma coisa no html ? e o que isso faz?>
Em 08/09/2017 at 17:24, carlos jr disse:
onde eu coloco isso, e preciso editar alguma coisa no html ? e o que isso faz?
Dentro do <style>
Esse efeito hover, iria adicionar uma linha a baixo do texto (menu) e trocaria a cor da fonte suavemente através do transition: all 1s;>
48 minutos atrás, gianp disse:
Dentro do <style>
Esse efeito hover, iria adicionar uma linha a baixo do texto (menu) e trocaria a cor da fonte suavemente através do transition: all 1s;
Valeu pela ajuda, já consegui. obrigado!
>
46 minutos atrás, carlos jr disse:
Se alguem puder me ajudar, eu fiz um menu, só que ele não funciona, eu queria que quando eu clica-se em uma opção ele funciona-se. ex: eu clico na opção Sonic, queria que ao clicar nessa opção ele mudasse o fundo de uma div e o texto de outra. Será que alguem poderia me ajudar?
Você pode fazer com javascript da seguinte forma: