是否包含或需要刷新页面？帮助更改导航栏中的 .active 响应 PHP

Question

我有一个关于 include 的问题，关于 require_once something.php 是否触发刷新？似乎每个新的 require 调用都会触发刷新。

实际上，我的实际问题有所不同，但它使我注意到了上述问题。请像我这样的初学者多多包涵。

在 Bootstrap 5 navbar, a nav-items has a .active to make it stand out. I want to move the .active to the relevant nav-item clicked and tried this on codepen。该脚本工作正常，但在我的玩具网站上使用它时不起作用，其中导航栏 html 代码由 php 回显，具体取决于 $isLoggedIn == true || false。

索引页面由 header.php（导航栏所在）和 requestedPage.php（包括所请求的任何页面）组成。

当页眉上的页面被点击时，会生成 index.php?reqPage=SomePage 和 included in index.php by require_once __DIR__."/pages/$reqPage.php";，这会重新加载页面（包括 header.php），因此这些导航栏项目从 Home 中的 .active 开始，而不是单击的项目。每当我点击导航项时，首先会显示 Link clicked! 警报，然后显示 document loaded!，提示 .active 已更改，然后重新加载导航栏。

请评论 and/or 建议如何使 .active 工作。我是 php 和后端的新手。

文件

index.php
header.php
js/header.js
pages/page1.php
pages/page2.php
pages/page3.php...

header.php

<html>
<head>
    <!--bootstrap and jquery CDNs are here-->
    <script src="js/header.js"></script> //for changing .active in nav-item
</head> 
<body>
<?php //use php to echo out the nav-bar
if ($isLoggedIn) { //show bootstrap nav-bar for a logged-in user 
    echo "
        <nav class='navbar navbar-expand-lg navbar-dark bg-primary'>
        <div class='container'>
        <a class='navbar-brand' href='#'>Trump</a>
        <button class='navbar-toggler' type='button' data-bs-toggle='collapse' data-bs-target='#loggedInMenus'>
        <span class='navbar-toggler-icon'></span>
        </button>
        <div class='collapse navbar-collapse' id='loggedInMenus'>
        <ul class='navbar-nav'>
            <li class='nav-item'>
            <a class='nav-link active' href='index.php?reqPage=page1'>Home</a>
            </li>
            <li class='nav-item'>
            <a class='nav-link' href='index.php?reqPage=page2'>Lions</a>
            </li>
            <li class='nav-item'>
            <a class='nav-link' href='index.php?reqPage=page3'>Tigers</a>
            </li>
        </ul></div></div></nav>
    ";
} else { //show nav-bar for an unlogged-in visitor
    echo "
        <nav class='navbar navbar-expand-lg navbar-dark bg-primary'>
        <div class='container'>
        <a class='navbar-brand' href='#'>Trump</a>
        <button class='navbar-toggler' type='button' data-bs-toggle='collapse' data-bs-target='#unloggedInMenus'>
        <span class='navbar-toggler-icon'></span>
        </button>
        <div class='collapse navbar-collapse' id='unloggedInMenus'>
        <ul class='navbar-nav'>
            <li class='nav-item'>
            <a class='nav-link active' href='page1.php'>Home</a>
            </li>
            <li class='nav-item'>
            <a class='nav-link' href='index.php?reqPage=page4'>Dogs</a>
            </li>
            <li class='nav-item'>
            <a class='nav-link' href='index.php?reqPage=page5'>Cats</a>
            </li>
        </ul></div></div></nav>
    ";
}
?>

index.php

<?php
require_once __DIR__."/init.php"; //this contains $isLoggedIn
require_once __DIR__."/header.php"; //load the menus
$reqPage = isset($_REQUEST["reqPage"]) ? $_REQUEST["reqPage"] : null; 
require_once __DIR__."/pages/$reqPage.php"; //load the requested page

header.js

$(document).ready(function(){
  alert("document loaded!");
  $(".nav-link").on("click", function() {
    alert("Link clicked!");
    $(".navbar-nav").find(".active").removeClass("active");
    $(this).addClass("active");
    }  
  );
});

Answer 1

此方法纯粹使用 PHP 来实现将“活动”class 设置为正确 link 的目标。我不知道你的网站是否是数据库驱动的，但为了简单起见，我使用数组来存储你的页面

<body>
    <?php
    // DON'T use php to echo out the nav-bar.  Instead just close the PHP tag
    
    $pagesArray = array('page1' => 'Home',
                        'page2' => 'title2',
                        'page3' => 'title3',
                        'page4' => 'Dogs',
                        'page5' => 'Cats');
    
    if ($isLoggedIn) {
    //show bootstrap nav-bar for a logged-in user 
    
    ?>
            <nav class='navbar navbar-expand-lg navbar-dark bg-primary'>
            <div class='container'>
            <a class='navbar-brand' href='#'>Trump</a>
            <button class='navbar-toggler' type='button' data-bs-toggle='collapse' data-bs-target='#loggedInMenus'>
            <span class='navbar-toggler-icon'></span>
            </button>
            <div class='collapse navbar-collapse' id='loggedInMenus'>
            <ul class='navbar-nav'>
    <?php
    // Open PHP tag again
    foreach($pagesArray AS $key => $value){
      //  Loop through your pages array (or sql loop, etc)
      $active = "";
      if ( stripos($reqPage, $key) !== FALSE) {
        //  if $key (page name) matches $reqPage make this link active
        //  if no match, $active remains empty, so when it is echo'ed,
        //  there is no class printed on the page for that anchor tag
        $active = "class='active'";
      }
      echo "<li class='nav-item'>
                <a class='nav-link' ".$active." href='index.php?reqPage=".$key."'>".$value."'</a>
                </li>";
      } // END while loop
        // close PHP tag again
      ?>
      </ul></div></div></nav>
    <?php
    } // END if logged in
    ?>
    </body>

Answer 2

鉴于我的代码组织，其中导航栏位于 header.php 内并包含在 index.php 中，并且请求的页面变量 $reqPage 仅驻留在 index.php 中，我不能在 header.php 中测试 $reqPage = $page 以在回显每个导航项之前识别所选页面。

$page 存在于 header.php 中，然后回显每个导航项
当用户点击 link 时，它的值变为 index.php 作为 $_GET[""]
在index.php

$reqPage

所以$page和$reqPage在不同的时间存在于不同的地方，在echo out之前无法测试，所以测试是否相等然后在echo中添加.active'没工作

相反，我回显了 header.php 中的导航栏，只识别请求的页面，然后使用 JS 在 index.php 中添加 .active。

header.php

 <nav class='navbar bg-primary'>
        <div class='container'>
        <a class='navbar-brand' href='#'>Trump</a>
        <button class='navbar-toggler' type='button' data-bs-toggle='collapse' data-bs-target='#menus'>
        <span class='navbar-toggler-icon'></span>
        </button>
        <div class='collapse navbar-collapse' id='menus'>
        <ul class='navbar-nav'>

<?php //php to dynamically echo out each navbar menu dependent on login 

//array to contain nav-items for logged-in / unlogged-in users
$loggedInMenu = ["Home" => "home", "Lions" => "lions", "Tigers" => "tigers", "Log Out" => "logout"];
$unloggedInMenu = ["Home" => null, "Log In" => "login", "Sign Up" => "signup"]; 

//produce either Logged-in menus or Unlogged-in menus
if ($isLoggedIn) { 
    produceNavMenu($loggedInMenu);
} else { 
    produceNavMenu($unloggedInMenu);
}

//helper function to echo out the nav-menu by nav-items one by one
//@param $menu must be associative array having Title => reqPage
function produceNavMenu(array $menu) {
    foreach($menu as $title => $page) {
        echo "<li class='nav-item'> 
            <a class='nav-link' id='$page' href='index.php?reqPage=$page'>$title</a>
            </li>";
    }
}

?>
        </ul></div></div></nav><!--end of navbar-->

index.php

<?php
require_once __DIR__."/init.php"; //this contains $isLoggedIn
require_once __DIR__."/header.php"; //load the menus
$reqPage = isset($_REQUEST["reqPage"]) ? $_REQUEST["reqPage"] : null; 
require_once __DIR__."/pages/$reqPage.php"; //load the requested page
?>

<script> //js to add .active to the relevant nav-item
$(document).ready( function() {
  var reqPage = "<?php echo "$reqPage"; ?>"; //php var to js var
  var activeID = "#"+reqPage; //html id
  $(activeID).addClass("active"); //add .active to the requested page
});
</script>

是否包含或需要刷新页面？帮助更改导航栏中的 .active 响应 PHP

Does include or require refresh a page? Help on changing .active in nav-bar echoed by PHP

javascript

php

jquery

backend

twitter-bootstrap