Активный класс в меню навигации в PHP - PullRequest
Новая
       1

Активный класс в меню навигации в PHP

1 голос
/ 24 января 2020

Я хочу управлять отображением моего активного класса на панели навигации.

У меня есть первая домашняя страница с кнопкой, и когда я нажимаю на эту кнопку. Я хочу попасть на вторую страницу с меню навигации с 

<ul> <li> tags

И хочу, чтобы при нажатии на кнопку на домашней странице по умолчанию я выбирал первое меню навигации с цветом фона, и нажатие на другие меню применяет тот же стиль к выбранному меню и удаляет активный класс в старом меню. 

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

   });

мой индекс. php страница 

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

мое меню. php страница 

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

мой сценарий. js страница 

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

мой стиль. css страница 

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

Выше приведен код, который я использую, но он не работает, кто-нибудь может помочь?

Ответы [ 2 ]

0 голосов
/ 24 января 2020

Просто добавьте документ. Уже тогда только он работает. просто отметьте это. 

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

Конечно, это будет работать, просто попробуйте.

0 голосов
/ 24 января 2020

В противном случае просто сделайте на основе страницы ie. (Индекс. php, о. php) и просто напишите класс .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>

Я думаю, это поможет вам.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...