<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<style>
body{
font-family: 'Roboto', sans-serif;
color: white;
font-size:10vw;
}
.aberto {background-color: #1a72e6;}
.fechado {background-color: #ff5252;}
</style>
</head>
<body class="fechado">
<div class="container text-center m-auto p-5">
<p>Fechado</p>
</div>
</body>
</html>
Adicione um comentário
|
3 Respostas
Pode ultilizar Jquery e ficará da seguinte forma
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title></title>
<style>
body{
font-family: 'Roboto', sans-serif;
color: white;
font-size:10vw;
}
.aberto {background-color: #1a72e6;}
.fechado {background-color: #ff5252;}
</style>
</head>
<body class="fechado">
<div class="container text-center m-auto p-5">
<p id="name">Fechado</p>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#name").click(function(){
var name = $("#name").text();
if(name == 'Fechado'){
$('#name').text("Aberto");
$("body").attr('class', 'aberto');
}else{
$('#name').text("Fechado");
$("body").attr('class', 'fechado');
}
});
});
</script>
</body>
</html>
-
1
Uma opção só com CSS usando label
e um input checkbox
. Isso vai dar muito mais semântica para o seu código e ainda não precisa importar jQuery ou mesmo se preocupar so o JS do browser do usuário está ativado ou não. Além disso, são itens de form
e vc pode manipula-los tranquilamente.
body {
font-family: 'Roboto', sans-serif;
color: white;
font-size: 10vw;
}
p {
margin: 0;
}
label {
cursor: pointer;
}
.aberto {
background-color: #1a72e6;
display: block;
}
.fechado {
background-color: #ff5252;
display: none;
}
#ok {
display: none;
}
#ok:checked ~ .fechado{
display: block;
}
#ok:checked ~ .aberto{
display: none;
}
<form>
<input type="checkbox" name="" id="ok">
<label for="ok" class="fechado container text-center m-auto p-5">
<p>Fechado</p>
</label>
<label for="ok" class="aberto container text-center m-auto p-5">
<p>Aberto</p>
</label>
</form>
-
1
-
Utilizando JavaScript para verificar a situação atual, não está muito dinâmico, mas funciona!
document.querySelector('p').addEventListener('click', function() { // evento da tag <p> ao ser clicada!
if (this.innerHTML == 'Fechado') { // verifica se o conteúdo presente na tag <p> é "Fechado".
this.innerHTML = 'Aberto'; // sendo assim, ele altera seu conteúdo para "Aberto".
document.querySelector('body').className = 'aberto'; // incluindo a classe (para assim realizar as alterações, como cores, etc..)
} else { // caso contrário, seja diferente de "Fechado"
this.innerHTML = 'Fechado'; // o conteúdo da tag <p> é alterado para "Fechado"
document.querySelector('body').className = 'fechado'; // incluindo sua classe.
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<style>
body{
font-family: 'Roboto', sans-serif;
color: white;
font-size:10vw;
}
.aberto {background-color: #1a72e6;}
.fechado {background-color: #ff5252;}
</style>
</head>
<body class="fechado">
<div class="container text-center m-auto p-5">
<p>Fechado</p>
</div>
</body>
</html>
Espero que o tenha ajudado. Bons estudos!!
-
-
Disponha, selecione minha resposta como "Aceita e Funcional", fica abaixo dos Votos, ao lado das respostas, na sua esquerda. Qualquer dúvida só falar! forte abraço! Commented 15/02/2021 às 3:44