Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Thiago Duarte

A função show não está funcionando

Por , em Javascript

Recommended Posts

Thiago Duarte    23

Thiago Duarte
Postado

Quando eu clico no link some e depois eu clico para aparecer não funciona, meu codigo ta assim:

 

<script>
    $(document).ready(function(){
        $('.link').click(function(){
            var t = $(this);
            $('.col-md-6').hide();
            $('.' + t.data('cor')).show();    
        });
    });
    </script>

O HTML assim:


<a class="link" data-cor='arte'>Arte e Cultura</a>

<a class="link" data-cor='animais'>Animais</a>

 

 <div class="col-md-6 arte">
                   ....
 </div>
 
<div class="col-md-6 animais">
                    ...
</div>

 

 

Alguem sabe o motivo?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marco Bruno    19

Marco Bruno
Postado

Olá, Thiago.

 

Eu não recomendo você misturar a camada visual (CSS) com a camada de comportamento (JavaScript). Eu varia isso da seguinte forma:

 

HTML (index.html)

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Mostrar e esconder</title>

  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="menu.css">
  <link rel="stylesheet" href="button.css">
  <link rel="stylesheet" href="section.css">
  <link rel="stylesheet" href="index.css">
</head>
<body class="index">
  <nav class="wrap-menu">
    <ul class="menu">
      <li class="menu-item">
        <a class="button isActive" href="#arte">Arte e cultura</a>
      </li>

      <li class="menu-item">
        <a class="button isActive" href="#animais">Animais</a>
      </li>
    </ul>
  </nav>

  <article class="wrap-section">
    <section id="arte" class="section section_Art isActiveStepOne isActiveStepTwo">
      <h1>Aqui fica tudo sobre Arte e Cultura</h1>

      <ul>
        <li><img src="http://placeimg.com/300/200/arch" alt="Arquitetura"></li>
        <li><img src="http://placeimg.com/300/200/arch" alt="Arquitetura"></li>
      </ul>
    </section>

    <section id="animais" class="section section_Animals isActiveStepOne isActiveStepTwo">
      <h1>Aqui fica tudo sobre animais</h1>

      <ul>
        <li><img src="http://placeimg.com/300/200/animals" alt="Animais"></li>
        <li><img src="http://placeimg.com/300/200/animals" alt="Animais"></li>
      </ul>
    </section>
  </article>

  <script src="index.js"></script>
</body>
</html>

CSS (reset.css)

* {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}

html, body {
  height: 100%;
}

body {
  font-family: Arial, sans-serif;
  font-size: 16px;
}

ul, ol, li {
  list-style: none;
}

CSS (menu.css)

.wrap-menu {
  padding-top: 2em;
  margin-bottom: 2em;
}
.menu-item {
  display: inline-block;
}

CSS (button.css)

.button {
  background-color: rgba(209, 213, 216, .8);
  color: #FFF;
  padding: .3em .5em;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;

  transition: background-color .2s linear;
}
.button.isActive {
  background-color: rgba(147, 101, 184, .8);
}
.button.isActive:hover {
  background-color: rgba(147, 101, 184, 1);
}

CSS (section.css)

.section {
  width: 45%;
  text-align: center;
  display:none;

  transition: opacity .4s linear;
}
.section.isActiveStepOne {
  display: block;
  opacity: 0;
}
.section.isActiveStepTwo {
  opacity: 1;
}
.section_Art {
  float: left;
}
.section_Animals {
  float: right;
}

CSS (index.css)

.index {
  padding-left: 10%;
  padding-right: 10%;
}

JavaScript (index.html)

(function() {
  'use strict';

  var $menu = document.querySelector('.menu');
  var $wrapSections = document.querySelector('.wrap-section');

  $menu.addEventListener('click', function (event) {
    var $origin = event.target;


    if ($origin.tagName == 'A') {
      var createSelectorToWhatSection = $origin.getAttribute('href');
      var $whatSection = document.querySelector(createSelectorToWhatSection);

      event.preventDefault();

      if ($origin.classList.contains('isActive')) {
        $origin.classList.remove('isActive');
        $whatSection.classList.remove('isActiveStepTwo');

        setTimeout(function() {
          $whatSection.classList.remove('isActiveStepOne');
        }, 450);
      };
      if (!$origin.classList.contains('isActive') && !$whatSection.classList.contains('isActiveStepOne')){
        $origin.classList.add('isActive');
        $whatSection.classList.add('isActiveStepOne');

        setTimeout(function() {
          $whatSection.classList.add('isActiveStepTwo');
        }, 100);
      };
    };
  });
})();

Se tiver qualquer dúvida só falar :-)

Compartilhar este post

Link para o post
Compartilhar em outros sites

leonardo2334    0

leonardo2334
Postado

se voce quer fazer para quando clicar no link sumir e aparecer. deve usar o toggle

se for como eu to pensando que e para quando clicar no link da arte e cultura ele aparecer e para quando eu clicar no link dos animais ele aparecer ficaria assim:

seu html:

<a class="link" id="arte" data-cor='arte'>Arte e Cultura</a>

<a class="link" id="animal" data-cor='animais'>Animais</a>

torque isso:

<div class="col-md-6 arte">
                   ....
 </div>
 
<div class="col-md-6 animais">
                    ...
</div>

por isso:

<div class="col-md-6" id="primeiro">
                   ....
 </div>
 
<div class="col-md-6" id="segundo">
                    ...
</div>

agora seu Jquery:

 

$("#primeiro").hide();
$("#segundo").hide();

$('#arte').click(function(){
    $("#primeiro").toggle();
    //$('.' + t.data('cor')).show();    nao intendi essa linha de codigo
 });                                                                                      $("#animal").click(function(){
        $("#segundo").toggle();
       });

acho que isso deve resolver seu problema

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Duarte    23

Thiago Duarte
Postado

Não é só primeiro e segundo, são muitos ai ficaria "feio" usar id em todas as divs

 

 

 

Marco, o teu javascript está muito grande, o meu ta bem menor e funcionando, só no meu site que da algum problema que não sei e não funciona, mas fora do site funciona, olha: https://jsfiddle.net/t42u9z7q/6/

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Veja o que aparece no console de erros no teu site então.

 

Ctrl + Shift + J no Firefox ou Chrome.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marco Bruno    19

Marco Bruno
Postado

Thiago.

 

Eu não recomendo você misturar a camada visual e a de interação. :-)

Se você quer utilizar o hide() e o show() do jQuery você está com um pequena problema de lógica. O código fica assim:

$(document).ready(function(){
  $('.link').click(function(){
      var $this = $(this);
      var $squares = $('.col-md-4');
      var $square = $('.' + $this.data('cor'));
      var trueOrFalse = $square.attr('style') != 'display: block;';

      $squares.hide();

      if (trueOrFalse) {
        $square.show();
      };
  });
});

Recomendo você dar uma estudada no JavaScript Puro. :-)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Duarte    23

Thiago Duarte
Postado

Thiago.

 

Eu não recomendo você misturar a camada visual e a de interação. :-)

Se você quer utilizar o hide() e o show() do jQuery você está com um pequena problema de lógica. O código fica assim:

$(document).ready(function(){  $('.link').click(function(){      var $this = $(this);      var $squares = $('.col-md-4');      var $square = $('.' + $this.data('cor'));      var trueOrFalse = $square.attr('style') != 'display: block;';      $squares.hide();      if (trueOrFalse) {        $square.show();      };  });});

Recomendo você dar uma estudada no JavaScript Puro. :-)

Esse codigo não funcionou comigo

 

 

Veja o que aparece no console de erros no teu site então.

 

Ctrl + Shift + J no Firefox ou Chrome.

Apareceu isso

 

Uncaught TypeError: $(...).on is not a function

common-files/icons/menu-icon-header-8.png Failed to load resource: the server responded with a status of 404 (Not Found)

VM113:1 'webkitMovementX' is deprecated. Please use 'movementX' instead.

VM113:1 'webkitMovementY' is deprecated. Please use 'movementY' instead.

 

 

viram?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Duarte    23

Thiago Duarte
Postado

Só baixar o jQuery e carregar ele primeiro e depois os seu códigos JavaScript.

 

Dentro do meu header já está carregando:

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>


    <script type="text/javascript">
    $(document).ready(function(){
        $('.link').click(function(){
            var t = $(this);
            $('.col-md-6').hide();
            $('.' + t.data('cor')).show();    
        });
    });
    </script>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marco Bruno    19

Marco Bruno
Postado

Thiago.

 

Você só tem esse código JavaScript na página?

 

Esse erro que está dando é no método on e esse código não utiliza o método on.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito