单击<a> tags

Question

I am trying to load PHP files inside a div based on what links a user clicks. I want the content to be refreshed only in that div, not the entire page.

My index.php file looks like this:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" id="allrepos" href="#">GitHubAPI</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
          
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav mr-auto">
                <?php
                    if(isset($_SESSION['userid']))
                    {
                        echo '
                            <li class="nav-item active">
                                <a class="nav-link" href="#">Hello, '.$_SESSION['username'].'!</a>
                            </li>
                            <li class="nav-item active dropdown">
                                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                My repositories
                                </a>
                                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <a class="dropdown-item" id="myrepos" href="#">All repositories</a>
                                    <a class="dropdown-item" id="mybookmarked" href="#">Bookmarked repositories</a>
                                </div>
                            </li>
                            <li class="nav-item active dropdown">
                                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Profile
                                </a>
                                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <a class="dropdown-item" href="#">Create team</a>
                                    <a class="dropdown-item" href="#">View teams</a>
                                    <div class="dropdown-divider"></div>
                                        <a href="github/logout.php" class="dropdown-item">Logout</a>
                                    </div>
                            </li>';
                    }
                    else
                    {
                        echo 
                            '<li class="nav-item active">
                                <a class="nav-link" href="https://github.com/login/oauth/authorize?client_id=">
                                Login
                                </a>
                            </li>';
                    }
                ?>
              </ul>
            </div>
        </nav>
        
         <div id="repositories">
            <?php include 'repositories.php'; ?>
        </div>
        
        <script type="text/javascript">
            $(document).ready(function(){
                $("#allrepos").click(function() {
                    $("#repositories").load('repositories.php');
                    return false;
                })
            });
            $(document).ready(function(){
                $("#myrepos").click(function() {
                    $("#repositories").load('myrepositories.php');
                    return false;
                })
            });
            $(document).ready(function(){
                $("#mybookmarked").click(function() {
                    $("#repositories").load('mybookmarkedrepos.php');
                    return false;
                })
            });
        </script>

When the index.php loads, I want the repositories.php to get loaded, then to change what gets displayed in the div with id "repositories" by clicking links.

At the moment nothing happens when I click any of the links.

Thank you!

Answer 1

仅出于此目的，您不需要在这里使用js，也可以通过php来实现。这是一个如何完成的示例。 希望对您有帮助。

        <a href="index.php?page=about"> about </a>
        <a href="index.php?page=contact"> contact </a>
        <a href="index.php?page=service"> service </a>
        <a href="index.php?page=shope"> shop </a>

        <?php
            if(isset($_GET['page'])
            {
               if($_GET['page'] == "about")
                 include'about.php';
               else if($_GET['page'] == "contact")
                include'contact.php'; 
               else if($_GET['page'] == "service")
               include'service.php';
               else if($_GET['page'] == "shope")
               include'shope.php';

            }
        ?>