如何重定向到其他页面并在点击时动态加载相应ID的内容

Question

i'm working on a project and i want to do following: on the home page i have divs which are dynamically loaded from database, now when i click on the div i want it to redirect to new page and then load corresponding content only, from database, just like a blog website, when you click on an article on homepage and it loads an article from database on the new page, i know it must be a simple process but i couldn't find how to write all that code, so can anyone help me with that?

thank you in advance

this is my home page:

<?php
require_once 'core/init.php';
include 'includes/head.php';
include 'includes/nav.php';
include 'includes/section1.php';

$sql = "SELECT * FROM topics WHERE featured = 1";
$featured = $db->query($sql);?>

  <section class="s2">
     <div class="grid_container">

        <?php while($article = mysqli_fetch_assoc($featured)) : ?>
        <div class="floating-box" onclick="loadart(<?= $article ['id']; ?>)">
           <img src="<?= $article ['image']; ?>" class="img-responsive" alt="<?= $article ['title']; ?>">
           <div class="grid_content_wrapper">
              <br>
              <p><?= $article ['subtitle']; ?></p>
              <h3><?= $article ['title']; ?></h3>
              <p><?= $article ['description']; ?></p>
           </div>
        </div>
        <?php endwhile; ?>

     </div>
  </section>


  <section class="s3">
     <a  href="single.php"><button  class="more_posts"><h3>MORE AMAZING THINGS</h3></button></a>
  </section>

<?php
include 'includes/footer.php';?>

now when i click on the div floating box i want it to redirect to this page and load content from database depending on the div i clicked i used this script but it only redirects and loads all content from database but i want it to load based on id of the corresponding div:

function loadart(id) { var data = {"id" : id}; window.location.href = "single.php";}

Answer 1

So let's say you have <div class="clickDiv">www.somedomain.com</div>

You want to set up an event handler that will listen for it, find out what domain is in the div and then redirect the user to that URL.

'$(".clickDiv").mousedown(function(){
var url = $(this).text();
window.location.href = url;
});

So what has happened here is that if all of your divs have the class "ClickDiv", the event listener knows when it's been clicked on and then redirects to the URL in that div.