estoy tratando de hacer un botón que al presionarse se le añade una clase a un determinado div que le otorgará la propiedad de css:
display:none;
Y le pondrá a otro div otra propiedad:
display: block;
Pero a la hora de hacer la ejecución simplemente no hace nada, dejo aquí los codes:
UPDATE DE CODES
HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Admin Panel</title>
<meta charset="utf-8" />
<link href="./assets/css/styles.css" rel="stylesheet" />
<link href="./assets/css/font-awesome/css/all.min.css" rel="stylesheet" />
<script src="./assets/js/jquery-3.5.1.min.js"></script>
<script src="./assets/js/func.js"></script>
</head>
<body>
<div class="root">
<div class="principal-site"> <!-- Not finished-->
<div class="principal-site-header-div">
<header class="principal-site-header">
<span class="principal-site-header-title"> Supremassy Aortical Panel </span>
<div class="principal-site-header-btn-div">
<input type="button" class="principal-site-header-btn-declarations" value="D e d i c a c i o n e s " id="declarations_js">
<button class="principal-site-header-btn-pruebas"> Pruebas </button>
</div>
</header>
</div>
<div class="principal-site-home" id="principal-site-home">
<div class="principal-site-home-welcome">
<p class="principal-site-home-welcome">
Bienvenido <!--<?php funcion para obtener nick?>--> <br />
</p>
</div>
<div class="principal-site-home-time">
<span class="principal-site-home-span"><!--<?php funcion para recordar dormir y eso--></span>
</div>
<div class="principal-site-home-rank">
<span class="principal-site-home-span"> Rango: <!-- Función para obtener el rank de privilegios--> </span>
</div>
<div class="principal-site-home-body">
</div>
</div>
</div>
<div class="principal-site-declarations " id="principal-site-declarations">
<span class="principal-site-declarations-span">Funciona! </span>
</div>
<div class="panel-side">
<br />
<br />
<br />
<div class="panel-side-letter-div">
<span class="panel-side-letter_t">
☃️BienVenido <!--<?php //Función de obtener usuario ?>-->☃️
</span>
</div>
<div class="panel-side-img-div"><span class="panel-side-img"> <img class="panel-side-img-s" align="middle" src="./assets/img/imagen.png" /> </span></div>
<div class="panel-side-usuarios">
<hr />
<span class="panel-side-letter"><i class="fas fa-user"></i> Usuarios Recientemente registrados <i class="fas fa-chevron-right"></i></span>
<hr />
</div>
<div class="panel-side-letter-bot-div">
<hr class="hr-disappear" />
<span class="panel-side-letter"><i class="fas fa-robot"></i> Bots Bloqueados <i class="fas fa-chevron-right"></i></span>
<hr />
</div>
<div class="panel-side-letter-login-div">
<hr class="hr-disappear" />
<span class="panel-side-letter">Logs <i class="fas fa-chevron-right"></i></span>
<hr />
</div>
<div class="panel-side-letter-websitecheck-div">
<hr class="hr-disappear" />
<span class="panel-side-letter"> <i class="fas fa-lock"></i> My Website Check <i class="fas fa-chevron-right"></i> </span>
<hr />
</div>
<div class="panel-side-copyright">
<div class="panel-side-letter_c-div"><span class="panel-side-letter_c">Hecho Por <span class="panel-side-letter-supremassy">ssnoverify</span></span></div>
<div class="panel-side-contact-container">
<p class="panel-side-letter-contact">Contáctame:</p>
<br />
<div class="panel-side-list-items-div">
<ul class="panel-side-unorganizated-contact-list">
<li class="panel-side-list-items"> <i class="fab fa-telegram"></i>@volatilidad </li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
@import url('https://fonts.googleapis.com/css2?family=Mohave:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Mono:wght@300&display=swap');
html {
background-color: #808080;
}
.panel-side {
/*Letter*/
font-family: 'Mohave', sans-serif;
/*Table shit*/
width: 26%;
height: 65%;
/*Border shit*/
border: 2px solid;
border-radius: 6px;
border-color: snow;
/*Method to panel portal not going down by scroll bar*/
display: block;
/*Margins to full-fill page*/
margin-left: -0.40%;
margin-top: -40%;
/*We apply another color to difference what's the panel bar and the page*/
background-color: white;
box-shadow: 0 0 40px snow;
}
.panel-side-img-s{
/*We apply this for stylize the img*/
width: 23%;
}
.panel-side-img-div{
margin-left: 36%;
margin-top: 7%;
}
.panel-side-letter-div {
margin-top: -4%;
margin-left: 31%;
}
.panel-side-usuarios {
margin-top: 16%;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}
.panel-side-usuarios:hover,
.panel-side-usuarios:active {
background-color: #f4f4f4;
text-transform: uppercase;
font-weight: 500;
}
.panel-side-letter{
margin-left: 22%;
}
.hr-disappear{
border: none;
margin-top: -2%;
}
/* Panel Side Effects working at Microsoft Edge and partially in Google Chrome*/
.panel-side-letter-bot-div,
.panel-side-letter-login-div,
.panel-side-letter-websitecheck-div {
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}
.panel-side-letter-bot-div:hover,
.panel-side-letter-bot-div:active,
.panel-side-letter-login-div:hover,
.panel-side-letter-login-div:active,
.panel-side-letter-websitecheck-div:hover,
panel-side-letter-websitecheck-div:active {
background-color: #f4f4f4;
text-transform: uppercase;
font-weight: 500;
}
/* This is the general copyright container, if you want to edit something related to ALL the objects at in, I'd
recommend you to edit this container, in other case, create another div with a different class to do it specifically.
*/
.panel-side-copyright {
margin-left: 33%;
margin-top: 7%;
}
/* This is the specific "Hecho por ssnovierify" copyright div. */
.panel-side-letter_c-div{
margin-bottom: 14%;
margin-top: -8%;
}
.panel-side-unorganizated-contact-list {
list-style: none;
margin-right: -35%;
margin-left: -11%;
}
.panel-side-letter-contact{
margin-top: -10%;
margin-bottom: 23%;
}
.panel-side-list-items {
margin-top: -20%;
}
/* Principal styles of the header. */
.principal-site-header-div {
width: 74%;
height: 13%;
background-color: ghostwhite;
border: 2px solid;
border-color: snow;
position: absolute;
top: 0px;
margin-left: 25.2%;
padding: 0;
box-shadow: 0 0 40px snow;
border-radius: 6px;
}
.principal-site-header-title {
font-family: 'Red Hat Mono', monospace;
margin-left: 0%;
margin-right: 0%;
}
/* Margins of header buttons*/
.principal-site-header-btn-declarations{
margin-top: 3%;
margin-left: 10%;
}
.principal-site-header-btn-pruebas{
margin-left: 27%;
}
/*Styles of Buttons*/
.principal-site-header-btn-declarations {
width: 10%;
height: 32%;
background-color: white;
color: royalblue;
border: none;
box-shadow: 0 0 40px snow;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
/*color: #fff;
background-color: #007bff;*/
.principal-site-header-btn-declarations:hover,
.principal-site-header-btn-declarations:active,
.principal-site-header-btn-declarations:focus {
color: #FFD700;
text-transform: uppercase;
background-color: #000000;
font-size: 1.2em;
width: 13%;
height: 34%;
}
.principal-site-home{
background-color: whitesmoke;
margin-left: 25.4%;
height: 89%;
margin-top: 6.7%;
width: 75%;
}
#principal-site-declarations {
display: none;
}
Jquery:
$("#declarations_js").on('click', function () {
document.getElementById("principal-site-declarations").style.display = "block";
document.getElementById("principal-site-home").style.display = "none";
});