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

Question

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

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

在Bootstrap 5 导航栏上，导航项有一个.active以使其脱颖而出。 我想将.active移动到点击的相关导航项并在 codepen 上尝试过。 该脚本工作正常，但在我的玩具网站上使用它时不起作用，其中导航栏 html 代码由 php 回显，具体取决于$isLoggedIn == true || false $isLoggedIn == true || false 。

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

当单击页眉上的页面时，会生成index.php?reqPage=SomePage并通过require_once __DIR__."/pages/$reqPage.php";包含在 index.php 中require_once __DIR__."/pages/$reqPage.php"; ，从而重新加载页面（包括header.php文件），所以这些导航栏项目进行重新启动.active在首页，而不是单击的项目。 每当我点击导航项目时，警报链接就会点击！ 是先显示后加载文件！ ，提示.active已更改，然后重新加载导航栏。

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

档案

index.php
header.php
js/header.js
pages/page1.php
pages/page2.php
pages/page3.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>
    ";
}
?>

索引.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

头文件.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 来实现在正确链接上设置“活动”类的目标。 我不知道你的网站是否是数据库驱动的，但为了简单起见，我使用一个数组来存储你的页面

<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
当用户点击一个链接时，它的值作为 $_GET[""] 进入index.php
它被分配给index.php $reqPage
所以$page和$reqPage在不同的时间存在于不同的地方，并且不能在 echo out 之前进行测试，所以测试是否相等然后将.active添加到 echo 中是行不通的

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

头文件

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

索引.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