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

b4qexyjb 于 2021-09-13 发布在 Java

关注(0)|答案(2)|浏览(296)

我有一个关于是否包括的问题 require_once something.php 是否触发刷新？似乎每一次都是新的 require 调用确实会触发刷新。
事实上，我的实际问题有所不同，但它将我的注意力引向了上述问题。请容忍像我这样的初学者。
在bootstrap 5导航栏上，导航项具有 .active 让它脱颖而出。我想搬家 .active 单击相关导航项目，并在codepen上尝试此操作。这个脚本工作得很好，但在我的玩具网站上使用它时就不起作用了，在我的玩具网站上，navbar html代码由php根据具体情况进行响应 $isLoggedIn == true || false .
索引页面由header.php（导航栏所在）和requestedpage.php（包括所请求的任何页面）组成。
单击页眉上的页面时，会生成 index.php?reqPage=SomePage 并包含在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>
    ";
}
?>

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");
    }  
  );
});

php jquery JavaScript backend twitter-bootstrap

来源：https://stackoverflow.com/questions/68532184/does-include-or-require-refresh-a-page-help-on-changing-active-in-nav-bar-echo

2条答案

按热度按时间

ohtdti5x1#

这种方法纯粹使用php来实现在正确的链接上设置“active”类的目标。我不知道你的网站是否是数据库驱动的，但为了简单起见，我使用一个数组来存储你的页面

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

赞(0）回复(0）举报 2021-09-13

tktrz96b2#

给定导航条所在的代码组织 header.php 并纳入 index.php ，并且请求的页面变量 $reqPage 只存在于 index.php ，我无法在内部测试$reqpage=$page header.php 在回显每个导航项目之前识别所选页面。 $page 存在于 header.php 在回显每个导航项目之前
当用户单击某个链接时，其值变为 index.php 当$\u获得[“”]
分配给 $reqPage 在里面 index.php 所以 $page 及 $reqPage 在不同的时间存在于不同的地方，并且不能在测试之前回音出来，所以测试是否相等，然后添加 .active 回音不起作用
相反，我将导航条回音到 header.php 并且只标识请求的页面，然后添加 .active 在里面 index.php 使用js。
页眉

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

赞(0）回复(0）举报 2021-09-13

我来回答

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

2条答案

相关问题

热门标签

最新问答