How to open a specific div on another page?

Asked

Viewed 566 times

1

I’m not sure if this question is duplicated or not, maybe I’m not sure how to search.

Anyway, I am developing a system of questions and answers (whose it is already ready) and I will make a page only for exercises with this system.

So far so good, is to enter the page and do the exercises. However, in the lesson section, there is the option "do exercises" of that particular class, so I can’t just direct this "do exercises" of a given class to the exercise page, i have to develop a method for opening the div/part corresponding to the exercise.

Example: When you click clip-path exercise: Polygon() should open another page with that clip-path exercise: Polygon() already opened.

Does anyone have any idea?

php css ajax

  • Now that I understand what you mean, I can’t help you much, but I can show you a path I’ve researched. If you understand English well, this has already been answered here: Stackoverflow. From what I understand, you can call a javascript function by reading the Hash in the URL.

  • All right, I’ll read it

1 answer

0

I don’t know if you’ve done it yet, but I’ve come up with a functional example for what you’re asking. There is no way I can put a functional fiddle here because it involves more than one page, so I will create two examples + a js and you can simulate making the following files in the same folder. Look at the 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>
  <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>

Second File - 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>

Third File - selector.js

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

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

Join the three files in a folder and tell me if it worked. Here was good! :)

  • About links and anchors I know, but it’s like this, on the other page the exercises work like this: You choose the exercise by a side menu and then the exercise opens, with . show() on the side. What I need is a function (jquery think it works, I don’t know) that will activate the specific part, ie will run the . show() in a specific div

  • @Gabrielmoodlight Check my new answer! :)

Browser other questions tagged php css ajax

You are not signed in. Login or sign up in order to post.