HTML estou tentando ocultar/mostrar div

Tosseg0 · 28 de outubro de 2023

estou querendo que abra uma div home ao clicar em home e feche a dashboard caso esteja aberta e vice-versa porém não esta indo aqui está meu codigo
HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script  src="pagina.js"></script>

</head>
<body>
  <header>
    <div class="icone-header">
      <img src="LOGO (1).jpg" alt="">
    </div>
    <div class="info-header">
      <div class="logo">
        <h3>Gestao de Banco</h3>
      </div>
    
    </div>
  </header>
<!-- Fim do Header-->

<section class="main">
  <nav class="sidebar">
    <br>
    <a href="#" onclick="Home('Home')" > Home </a>
    <hr>
    <br>
    <a href="#"  onclick="Dashboard('Dashboard')"  > Dashboard</a>
    <hr>
    <br>
    <a href="#"> Previsao de Clientes</a>
    <hr>
  </nav>
  
  <div class="conteudo-home"  id="Home" >
    <h1>Bem vindo ao banco </h1>
  
   </div>
  <div class="conteudo-dashboard" id="Dashboard">
      <h1>asdsadas</h1>
  </div>
   
</section>

</body>

</html>

E EM JS




function Home(el) {
  console.log("home")
  var display = document.getElementById(el).style.display;
  if(display == 'none'){
      document.getElementById(el).style.display = 'flex';}
  else{
      document.getElementById(el).style.display = 'flex';}
}

function Dashboard(dash) {
  console.log("dashboard")
  var display = document.getElementById(dash).style.display;
  if(display == 'none'){
      document.getElementById(dash).style.display = 'flex';}
  else {
      document.getElementById(dash).style.display = 'none';}
}

washalbano · 28 de outubro de 2023

Olá!
Segue sugestão:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="assets/css/style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
    integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<body>
  <header>
    <div class="icone-header">
      <img src="LOGO (1).jpg" alt="">
    </div>
    <div class="info-header">
      <div class="logo">
        <h3>Gestao de Banco</h3>
      </div>

    </div>
  </header>
  <!-- Fim do Header-->

  <section class="main">
    <nav class="sidebar">
      <br>
      <a href="home">Home</a>
      <hr>
      <br>
      <a href="dashboard">Dashboard</a>
      <hr>
      <br>
      <a href="previsao-de-clientes">Previsao de Clientes</a>
      <br>
      <hr>
      <a href="about">Conheça-nos</a>
      <hr>
    </nav>

    <main>

    </main>
  </section>

  <template id='home'>
    <h1>Bem vindo ao banco</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium voluptatum commodi eos quas nobis natus
      quisquam perspiciatis, dolorum facere reprehenderit. Quaerat non nihil repellat possimus eligendi officiis
      molestiae laudantium accusantium?</p>
  </template>
  <template id='dashboard'>
    <h1>Dashboard</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, eius itaque, molestias praesentium porro dicta
      modi vel nostrum minus corrupti earum. Tempore exercitationem totam odio! Quae reiciendis alias ad quos!</p>
  </template>
  <template id='previsao-de-clientes'>
    <h1>Dashboard</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla inventore id aliquid nostrum! Illum omnis corrupti
      at earum quidem excepturi? Nam voluptas quas deleniti non quasi quos quisquam dicta. Saepe?</p>
  </template>

  <script src="assets/js/app.js"></script>
</body>

</html>

const sidebar = document.querySelector('nav.sidebar')
const main = document.querySelector('main')
sidebar.onclick = (e) => {
  e.preventDefault()
  const { target } = e
  if (target.matches('a')) {
    const id = target.getAttribute('href')
    const template = document.querySelector(`template#${id}`)
    let mainContent = '<h1>Oops! Página não encontrada!</h1>'
    if (template) {
      mainContent = template.innerHTML
    }
    main.innerHTML = mainContent
  }
}