How do I open a specific div on another page?

Question

How do I open a specific div on another page?

Navigation

#1 by (0 votes)

1

I'm not sure whether this question is duplicated or not, I may not know how to look right.

Anyway, I'm developing a question and answer system (which is already ready) and I'm going to make a page just for exercises with this system.

So far so good, is to go on the page and do the exercises. However, in the classes part, you have the option to "do exercises" of that particular class, so I can not simply direct this "doing exercises" of a certain class just to the exercises page, I have to develop a method to open the div / part corresponding to the year.

Example: When you click do clip-path exercise: polygon () should open the other page with this clip-path exercise: polygon () already open.

Does anyone have any ideas?

php css ajax

asked by anonymous 02.03.2017 / 17:55

1 answer

Search Refinement in Android Search View How to perform the sum of values that I have multiplied?

score 0 · Answer 1

I do not know if you already have, but I ended up creating a functional example for what you are asking for. There is no way I can put a single functional fiddle here because it involves more than one page, so I'll create two examples + one js and you can simulate by making the following files in the same folder. See step-by-step:

First File - index.html

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><scriptsrc="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>

Second File - page.html

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><scriptsrc="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>

Third File - selector.js

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

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

Put the three files together in one folder and let me know if it worked. Here was good! :)