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

Question

I have a question on include , on whether require_once something.php triggers a refresh or not?我有一个关于include的问题，关于require_once something.php是否触发刷新？ It seems every new require call does trigger a refresh.似乎每个新的require调用都会触发刷新。

Actually, my actual question is something different but it directed my attention to the above.实际上，我的实际问题有所不同，但它使我注意到了上述问题。 Please bear with a beginner like me.像我这样的初学者请多多包涵。

On Bootstrap 5 navbar , a nav-items has a .active to make it stand out.在Bootstrap 5 导航栏上，导航项有一个.active以使其脱颖而出。 I want to move the .active to the relevant nav-item clicked and tried this on codepen .我想将.active移动到点击的相关导航项并在 codepen 上尝试过。 The script works fine, but it doesn't work when using it on my toy website, where the navbar html codes are echoed out by php depending on $isLoggedIn == true || false该脚本工作正常，但在我的玩具网站上使用它时不起作用，其中导航栏 html 代码由 php 回显，具体取决于$isLoggedIn == true || false $isLoggedIn == true || false . $isLoggedIn == true || false 。

The index page is composed of a header.php (which the nav-bar resides) and a requestedPage.php (which includes whatever page being requested).索引页由 header.php（导航栏所在）和 requestsPage.php（包括被请求的任何页面）组成。

When a page on the header is clicked, that generates index.php?reqPage=SomePage and included in index.php by require_once __DIR__."/pages/$reqPage.php";当单击页眉上的页面时，会生成index.php?reqPage=SomePage并通过require_once __DIR__."/pages/$reqPage.php";包含在 index.php 中require_once __DIR__."/pages/$reqPage.php"; , which reloads the page (including header.php), so those nav-bar items start afresh with .active in Home rather than the item clicked. ，从而重新加载页面（包括header.php文件），所以这些导航栏项目进行重新启动.active在首页，而不是单击的项目。 Whenever I click on a nav-item, the alert Link clicked!每当我点击导航项目时，警报链接就会点击！ is first shown followed by document loaded!是先显示后加载文件！ , suggesting .active is changed and then nav-bar reloaded. ，提示.active已更改，然后重新加载导航栏。

Please comment and/or advise on how to make the .active work.请评论和/或建议如何使.active工作。 I am new to php and backend.我是 php 和后端的新手。

files档案

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

<?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头文件.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

This approach uses purely PHP to achieve the goal of setting the "active" class on the correct link.这种方法纯粹使用 PHP 来实现在正确链接上设置“活动”类的目标。 I don't know if your website is database driven or not, but for simplicity, I'm using an array to store your pages我不知道你的网站是否是数据库驱动的，但为了简单起见，我使用一个数组来存储你的页面

<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

Given my code organization where the navbar is inside header.php and included into index.php , and that the requested page variable $reqPage only resides in index.php , I cannot test $reqPage = $page inside header.php to identify the selected page before echoing out each nav-item.鉴于我的代码组织，其中导航栏位于header.php并包含在index.php ，并且请求的页面变量$reqPage仅驻留在index.php ，我无法在header.php测试 $reqPage = $page 来识别选定的回显每个导航项之前的页面。

$page exists in header.php before echoing out each nav-item $page在回显每个导航项之前存在于header.php
when user clicks on a link, its value goes to index.php as $_GET[""]当用户点击一个链接时，它的值作为 $_GET[""] 进入index.php
it is assigned to $reqPage in index.php它被分配给index.php $reqPage
so $page and $reqPage exist in different places at different times, and cannot be tested before echo out, so testing for equality and then add .active to the echo doesn't work所以$page和$reqPage在不同的时间存在于不同的地方，并且不能在 echo out 之前进行测试，所以测试是否相等然后将.active添加到 echo 中是行不通的

Instead, I echo out the nav-bar in header.php and only identify the requested page and then add .active in index.php using JS.相反，我回显了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

<?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>

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

问题描述

2 个解决方案

解决方案1
2 已采纳 2021-07-26 16:41:13

解决方案2
0 2021-07-27 10:12:32

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

问题描述

2 个解决方案

解决方案1 2 已采纳 2021-07-26 16:41:13

解决方案2 0 2021-07-27 10:12:32

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

解决方案1
2 已采纳 2021-07-26 16:41:13

解决方案2
0 2021-07-27 10:12:32