0

Não sei ao certo se essa pergunta é duplicada ou não, talvez eu não esteja sabendo procurar direito.

Enfim, eu estou desenvolvendo um sistema de perguntas e respostas (cujo o mesmo já está pronto) e eu vou fazer uma página somente pra exercícios com esse sistema.

Até aí tudo bem, é entrar na página e fazer os exercícios. Porém, na parte de aulas, tem a opção "fazer exercícios" daquela determinada aula, sendo assim eu não posso simplesmente direcionar esse "fazer exercícios" de determinada aula somente pra página de exercícios, eu tenho que desenvolver um método para que abra a div/parte correspondente ao exercício.

Exemplo: Quando clicar em fazer exercício de clip-path: polygon() deve abrir a outra página com esse o exercício de clip-path: polygon() já aberto.

Alguém tem alguma ideia?

2
  • Agora que eu entendi o que quis dizer, não posso te ajudar muito, mas posso te indicar um caminho que pesquisei. Se entender bem de inglês, isso já foi respondido aqui: Stackoverflow. Pelo que entendi, você pode chamar uma função javascript pela leitura da Hash no URL. Commented 2/03/2017 às 17:15
  • Certo, vou dar uma lida Commented 2/03/2017 às 17:16

1 Resposta 1

0

Não sei se você já conseguiu, mas eu acabei criando um exemplo funcional para o que você está pedindo. Não tem como eu botar um só fiddle funcional aqui porque involve mais de uma página, então vou criar dois exemplos + um js e você pode simular fazendo os seguintes arquivos na mesma pasta. Veja no passo-a-passo:

Primeiro Arquivo - index.html

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="selector.js"></script>
  <script>
    $(function() {
      initSectorUI();

      $("#navigator a").click(function() {
        showSectorMini($(this).attr('href'));
      });
    });
  </script>
  <style>
    .block {
      width: 100%;
      height: 33vh;
    }
    
    #first {
      background: red;
    }
    
    #second {
      background: blue;
    }
    
    #third {
      background: green;
    }
    
    #fourth {
      background: yellow;
    }
    
    #fifth {
      background: pink;
    }
  </style>
</head>

<body>
  <div id="navigator">
    <a href="page.html#first">First</a>
    <a href="page.html#second">Second</a>
    <a href="page.html#third">Third</a>
    <a href="page.html#fourth">Fourth</a>
    <a href="page.html#fifth">Fifth</a>
  </div>
</body>

</html>

Segundo Arquivo - page.html

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="selector.js"></script>
  <script>
    $(function() {
      initSectorUI();

      $("#navigator a").click(function() {
        showSectorMini($(this).attr('href'));
      });
    });
  </script>
  <style>
    .block {
      width: 100%;
      height: 33vh;
    }
    
    #first {
      background: red;
    }
    
    #second {
      background: blue;
    }
    
    #third {
      background: green;
    }
    
    #fourth {
      background: yellow;
    }
    
    #fifth {
      background: pink;
    }
  </style>
</head>

<body>
  <div id="sectors">
    <div id="first" class="block" style="display: none;">A</div>
    <div id="second" class="block" style="display: none;">B</div>
    <div id="third" class="block" style="display: none;">C</div>
    <div id="fourth" class="block" style="display: none;">D</div>
    <div id="fifth" class="block" style="display: none;">E</div>
  </div>
  <br>
  <form><input Type="button" VALUE="Voltar" onClick="history.go(-1);return true;"></form>
</body>

</html>

Terceiro Arquivo - selector.js

var initSectorUI = function() {
  if (location.hash) showSectorMini(location.hash);
};

var showSectorMini = function(sector) {
  $('#sectors > div').hide();
  $(sector).show();
};

Junte os três arquivos em uma pasta e me diga se funcionou. Aqui foi de boas! :)

2
  • Sobre links e âncoras eu sei, mas é que assim, na outra página os exercícios funcionam assim: Você escolhe o exercício por um menu lateral e aí o exercício abre, com .show(), do lado. O que eu preciso é uma função (jquery acho que funciona, não sei) que vai ativar a parte específica, ou seja, vai executar o .show() numa div específica Commented 2/03/2017 às 17:07
  • @GabrielMoodlight Cheque minha nova resposta! :) Commented 2/03/2017 às 19:01

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .