Jump to content

Recommended Posts

Olá!

 

Tentei editar o recurso <span on click> em alguns trechos desta página e não consegui porque não sei bem como funciona.

 

https://pastebin.com/GdDNydjk

 

A página é dividida por anos (2017, 16, 15...) e eu queria que os itens ficassem ocultos e só aparecessem quando clicasse no ano que eu quero abrir.

 

Também tentei fazer com que esse mesmo elemento fosse fechado ao estar expandido, mas não consegui.

 

Alguém poderia ajudar?

Share this post


Link to post
Share on other sites

Acredito que possa ser feito assim inline:

<span onclick="FuncaoChamada(); return false"></span>

 

 

Outra forma de fazer seria assim adicionando o evento:

$('#idSpan').click(function() {
//Seu código
});
  • +1 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Robson Augusto
      Boa noite, sera que alguém poderia me dar uma luz!? 
      Vamos lá, a situação é a seguinte, tenho um site classificados que criei a pouco tempo, está com problemas de rastreamento das páginas dos itens postados (anúncios), ou seja, o search console do Google, acusa anomalia nao identificada ao rastrear páginas dos anúncios, e não esta indexando estas páginas. O que poderia ser? Eu utilizo o osclass como plataforma principal do site. Se alguém quiser mais alguma informação que possa ser útil... Obrigado 
    • By EdPaulino
      Bom dia pessoal, estou tentando inserir um menu responsivo no meu projeto, mas quando acesso pelo celular ele não se adapta, continua do mesmo jeito que no  computador, o que deve-se fazer pra forçar-lo a se adaptar?
       
      segue codigo:
       
      <!--
       
      <!DOCTYPE html>
      <html>
      <head>
          <meta charset="utf-8">
          <title>Menu RESPONSIVO</title>
          
          <!---<link rel="stylesheet" href="style.css">-->
      </head>
          <style>
              *{
                  margin: 0;
                  padding: 0;
               }
              
              .menu{
                  width: 100%;
                  height: 50px;
                  background-color: #f0f0f0;
                  font-family:'Arial';
              }
              .menu ul{
                  list-style:none;
                  position: relative;
              }
              .menu ul li{
                  width: 150px;
                  float: left;
              }
              .menu ul ul{
                  position: absolute;
                  visibility: hidden; 
              }
              
              .menu ul li:hover ul{
                  visibility: visible;
                  display:block;
              }
              .menu a{
                  text-decoration: none;
                  display: block;
                  padding: 15px;
                  text-align: center;
                  background-color: #f6f6f6;
                  color: #000;
              }
              .menu a:hover{
                  background-color: #f4f4f4;
              }

              .menu ul ul li{
                      float: none;
                      border-bottom: 1px solid #000;
              }
              .menu ul ul li a{
                      background-color: #f0f0f0;
              }
              label[for="bt_menu"]{
                          padding: 5px;
                          background-color: #d0d0d0;
                          font-family: 'Arial';
                          text-align: center;
                          font-size: 30px;
                          width: 50px;
                          height: 50px;
              }
              
              #bt_menu{
                  display: none ;
              }    
              label[for="bt_menu"]{
                          display: none;        
              }
          @media (max-width: 800px){
                  label[for="bt_menu"]{
                          display:block;
                          margin-left: 0;        
                  }
                  #bt_menu:checked ~ .menu{
                      margin-left: 0;
                      display: block;
                  }    
                  
                  .menu{
                      margin-top:5px;
                      margin-left: -100%;
                      transition: all .4s
                  }
                  .menu ul li{
                      width:100%;
                      float: none;
                  }
                  .menu ul ul{
                      position:static;
                      overflow: hidden;
                      max-height: 0;
                      transition: all 2s;
                  }
                  .menu ul li:hover ul{
                      height:auto;
                      max-height: 200px;
                  }
                          
          }    
          </style>
      <body>
          <input type="checkbox" id="bt_menu">
          <label for="bt_menu">&#9776;</label>
                 <nav class="menu">
                      <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">Serviços</a>
                  <ul>
                  <li><a href="#">Criação de Sites</a></li>
                  <li><a href="#">Artes Visuais</a></li>
                  </ul>
              </li>
              <li><a href="#">Cursos</a>
                  <ul>
                  <li><a href="#">Java</a></li>
                  <li><a href="#">Photoshop</a></li>
                  <li><a href="#">HTML/CSS</a></li>
                  </ul>
              </li>
              <li><a href="#">Contato</a></li>
              </ul>
                  </nav>
      </body>
      </html>
       
      --->

    • By s3c0
      Olá pessoal,
       
      peguei um exemplo de um menu suspenso que utiliza somente CSS, porém não estou conseguindo adaptar para a minha aplicação.
       
      Segue abaixo:
       
      * { box-sizing: border-box; } body { margin: 0; } /*Configurações Padrões*/ ul.menu, .menu li, .menu a{ margin:0; padding:0; list-style:none; text-decoration:none; width:100%; } ul.menu ul{ position:absolute; display:none;} /* Configurações nivel 1*/ ul.menu{ float:left; font-family:Verdana, Geneva, sans-serif; font-size:15px; padding:0 5px;} .menu li{ float:left; width:auto; position:relative;} .menu li a{ display:block; padding:0 20px; line-height:45px; height:45px; float:left; width:240px; transition:all 0.1s linear; } /* Configurações nivel 2*/ .menu li:hover > ul.submenu-1{ display:block; top:45px; left:0; padding:0px; width:250px; } .menu ul.submenu-1 a{ padding:0 20px; width:250px; } /* Configurações nivel 2*/ .menu li:hover > ul.submenu-2{ display:block; top:0; padding:0px; width:250px; left:240px; } .menu ul.submenu-2 a{ width:250px; padding:0 20px; } /* Configurações nivel 3*/ .menu li:hover > ul.submenu-3{ display:block; top:0; padding:0px; width:250px; left:240px; } .menu ul.submenu-3 a{ width:250px; padding:0 20px; } .column1 { float: left; width: 250px; padding: 10px; min-height: 250px; } .column1 a { float: none; color: black; padding: 16px; text-decoration: none; display: block; text-align: left; } .column1 a:hover { } .column4 { float: right; width: 300px; padding: 10px; min-height: 250px; position:relative; top:0px; } .column4 a { float: none; color: black; padding: 16px; text-decoration: none; display: block; text-align: left; } .column4 a:hover { } .row:after { content: ""; display: table; clear: both; } /*Configurações de cores*/ /*nivel 1*/ .menu{background:#CCC; } .menu a{ color:#000; } .menu li:hover > a{ color:#000; } /*nivel 2*/ .submenu-1{} .submenu-1 a{color:#000;} .submenu-1 li:hover > a{ color:#000; } /*nivel 3*/ .submenu-2{ } .submenu-2 a{color:#000;}; .submenu-2 li:hover > a{ color:#000; } /*nivel 3*/ .submenu-3{ } .submenu-3 a{color:#000;} .submenu-3 li:hover > a{ color:#000; }  
      <ul class="menu"> <!-- Esse é o 1 nivel ou o nivel principal --> <li><a href="#">Categorias <i class="fa fa-caret-down"></i></a> <ul class="submenu-1"> <!-- Esse é o 2 nivel ou o primeiro Drop Down --> <li><a href="#">Departamento 1 <i class="fa fa-caret-right"></i></a> <ul class="submenu-2"> <!-- Esse é o 3 nivel ou o Segundo Drop Down --> <li><a href="#">Categoria 1</a></li> <li><a href="#">Categoria 11</a></li> <li><a href="#">Categoria 111 <i class="fa fa-caret-right"></i></a> <ul class="submenu-3"> <!-- Esse é o 4 nivel ou o Terceiro Drop Down --> <li><a href="#">Subcategoria 1</a></li> <li><a href="#">Subcategoria 11</a></li> <li><a href="#">Subcategoria 111</a></li> </ul> </li> </ul> </li> <li><a href="#">Departamento 2 <i class="fa fa-caret-right"></i></a> <ul class="submenu-2"> <!-- Esse é o 3 nivel ou o Segundo Drop Down --> <li><a href="#">Categoria 1</a></li> <li><a href="#">Categoria 11</a></li> <li><a href="#">Categoria 111 <i class="fa fa-caret-right"></i></a> <ul class="submenu-3"> <!-- Esse é o 4 nivel ou o Terceiro Drop Down --> <li><a href="#">Subcategoria 1</a></li> <li><a href="#">Subcategoria 11</a></li> <li><a href="#">Subcategoria 111</a></li> </ul> </li> </ul> </li> </ul> </li> </ul>  
      A primeira imagem é o resultado e a segunda imagem, seria o que estou querendo fazer.
       
      Alguém consegue me explicar o que está de errado?
       
      Agradeço a atenção de todos!


    • By Ewerton Hugo
      Boa noite, estou tentando fazer um site, que mostre a hora no momento que é acessado, juntamente com uma imagem que represente os periodos do dia, manhã
      , tarde e noite.Porém não consigo fazer com que o código em java script funcione alguém pode me ajudar (sou iniciante)?
       
       
       
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.