是否包含或需要刷新頁面？在 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