PHP导航菜单中的活动类答案

【问题标题】：Active class in navigation menu in PHPPHP导航菜单中的活动类
【发布时间】：2023-03-03 09:58:02
【问题描述】：

我想管理我的活动课程在导航栏上的显示。

我有一个带有按钮的第一个主页，当我单击此按钮时。我想到达带有导航菜单的第二页

<ul> <li> tags

我希望在单击主页上的按钮时，默认情况下我选择第一个具有背景颜色的导航菜单，然后单击其他菜单会将相同的样式应用于单击的菜单并删除活动类旧菜单。

<pre>
    //home page
    <div>
      <a href="page-menu.php" class="card-link">Voir Menu</a>
    </div>
   // Menu page 
    <nav class="nav-bloc-menu">
      <ul id="list1">
        <li id="testmenu" <?php if ($pec == 22) {echo "class=\"p22\"";}?>><a href="m1.php">Menu 
          1</a></li>
        <li <?php if ($pec == 23) {echo "class=\"p23\"";}?>><a href="m2.php">Menu 2</a></li>
       <li <?php if ($pec == 24) {echo "class=\"p24\"";}?>><a href="m3.php">Menu 3</a></li>
     </ul>
   </nav>
   //jquery
    $(".nav-bloc-menu ul  a").click(function(){
     $(".nav-bloc-menu ul a").css("background-color","rgba(255,255,255,1)");
     $(this).css("background-color","#1c2335");
     $(this).css("color","white");

   });
</pre>

我的 index.php 页面

<pre>
   <?php
   $pagetitle = "Page";
   $current_page = "menu.php";
  ?>
    <!DOCTYPE html>
      <html lang="fr">
          <head>
              <link rel="stylesheet" href="style.css">
           <script 
      src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 
         </script>
         <script src="script.js"> 
         </script>
          </head>
          <body>
               <div class="card">
                    <a href="menu.php" class="card-link">Voir Menu 
                       </a>
               </div>
          </body>
      </html>
</pre>

我的 menu.php 页面

<pre>
       <nav class="nav-bloc-menu">
    <ul id="list1">
    <li class="<?php if ($current_page == "p1.php" || $current_page == 
   "menu.php") 
  {?>active<?php }?>"><a href="p1.php">p1</a><li>
    <li class="<?php if ($current_page == "p2.php") {?>active<?php }?>"><a 
   href="p2.php">p2</a><li>
    <li class="<?php if ($current_page == "p3.php") {?>active<?php }?>"><a 
    href="p3.php">p3</a><li>
       </ul>
   </nav>
</pre>

我的 script.js 页面

<pre>
    $(document).ready(function(){
      $(".nav-bloc-menu ul  a").click(function(){
      $(".nav-bloc-menu ul a").css("background-color","rgba(255,255,255,1)");
      $(this).css("background-color","#1c2335");
      $(this).css("color","white");   });
     });
</pre>

我的 style.css 页面

<pre>
    .nav-bloc-menu li .active{ background-color:#1c2335;color:white; }
</pre>

上面是我正在使用但不起作用的代码，有人可以帮忙吗？

【问题讨论】：

您忘记关闭最后一个 css 更改的括号和函数的花括号。检查控制台，你会看到一些语法错误。
你好@Triby，我修改了一些语法错误
$.css() 是一个函数，需要逗号分隔的参数，而不是冒号，例如：$(this).css("color", "white");。请检查您的控制台，您会在那里看到此错误。
你好@Triby，我修改了这个错误。

标签： php jquery html css

【解决方案1】：

否则就根据页面 ie.(index.php,about.php) 写 class .nav-menu li .active{ background:white;color:black; }

 <?php    
        $uri_path = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);
        $uri_segments = explode('/', $uri_path);
        $current_page= $uri_segments[0]; //ex: https://xxxx.com/about.php 
  ?>
  <ul class="nav-menu">
       <li class="<?php if($current_page=="index.php"){ ?>active<?php } ?>"><a href="index.php">Home</a></li>
       <li class="<?php if($current_page=="about.php"){ ?>active<?php } ?>"><a href="index.php">Home</a></li>
  </ul>

我想这会对你有所帮助。

【讨论】：

【解决方案2】：

只需添加 document.ready 就可以了。只需检查这个。

   $(document).ready(function(){
    $(".nav-bloc-menu ul  a").click(function(){
    $(".nav-bloc-menu ul a").css("background-color","rgba(255,255,255,1)");
    $(this).css("background-color","#1c2335");
    $(this).css("color","white");   });
    });

// 如果假设使用 ajax 页面意味着你需要这样做

   $(document).on("click",".nav-bloc-menu ul  a",function(){
    $(".nav-bloc-menu ul a").css("background-color","rgba(255,255,255,1)");
    $(this).css("background-color","#1c2335");
    $(this).css("color","white");
   })

当然可以试试看。

【讨论】：

你好@siva.picky，我测试了你的解决方案，但它对我不起作用。你能看到我基于活动页面解决方案的代码吗，当我点击一个 li 时，我该如何更改current_page 值并应用活动类。
@obela06 你完成了吗？这是在实时网站上吗？