Hola a todos, tengo un código html, css, usando blazor donde necesito hacer algunas cosas en javascript.
mi código:
.mywin { width: 300px; height: 150px; } .navigation { width: 100px; height: 100%; } .ItemActive { border-radius: 5px; background: red; } .navigation.active { width: 50px; } .windowHome .windowInfo { right: 0; width: 200px; height: 100%; } <div classe="mywin"> <button type="button">Click Me!</button> <div class="navigation"> <ul> <li class="ItemActive"> <a href="#"><i class="fas fa-home icon"/><span>Home</span></a> </li> <li> <a href="#"><i class="fas fa-bell icon"/><span>Info</span> </a> </li> </ul> <div class="windowHome"> .... </div> <div class="windowInfo"> .... </div> </div> <div> @code { } 1- Cambiar la clase de navigation a navigation active haciendo clic en el botón y al volver a hacer clic volver a navigation
2 - Cambiar la clase ItemActive haciendo clic en otro elemento, en este caso tengo dos, Home e Info
3 - Muestre la ventana mientras hago clic en los elementos de Inicio e Información, con windowHome para el elemento de Home y windowInfo para el elemento de info
¿Podría alguien mostrarme cómo puedo hacer esto?
Algo para comenzar con el uso de Blazor:
<div class="navigation @(@IsClicked ? "active" : "")">@(@IsClicked ? "active" : "")</div> <ul> <li class="@(@IsClicked ? "" : "ItemActive")"> <a href="#"><i class="fas fa-home icon" /><span>Home</span></a> </li> <li class="@(@IsClicked ? "ItemActive" : "")"> <a href="#"><i class="fas fa-bell icon" /><span>Info</span> </a> </li> </ul> @if (@IsClicked) { <div class="windowHome"> windowHome </div> } else { <div class="windowInfo"> windowInfo </div> } @code { private bool IsClicked; protected void OnClick() { IsClicked = !IsClicked; } }