Как сделать динамическую боковую панель активным при нажатии

Question

Я создаю динамическое меню. Я хотел выделить меню после его выбора. Мы используем php. просто нужно выяснить, как добавить класс к текущей странице. Кто-нибудь может мне с этим помочь?

<div id="sidebar-wrapper" class="sidebar-toggle"> 
    <ul class="sidebar-nav"> 
     <?php 

     $i=1; 
    if(count($shipments) > 0) 
     { 
     foreach($shipments as $row) 
     { 
     $shipment_id = $row['id']; 
     $containerdest = $row['no']."-".$row['destination']; 

      ?> 
     <li id="shipment<?php echo $shipment_id; ?>"><a href="<?php echo site_url("users/get_details/$shipment_id");?>" id="display<?php echo $shipment_id; ?>"><?php echo $containerdest; ?></a> 
     </li> 
     <?php $i++; 
     } 
     } ?> 


     <li> 
      <a href="<?php echo base_url();?>index.php/users/logout">Logout</a> 
     </li> 
    </ul> 
    </div> 
    </div> 

Answer 1

Измените свой HTML строку с ниже линии

<li id="shipment<?php echo $shipment_id; ?>" class="menu"><a href="<?php echo ite_url("users/get_details/$shipment_id");?>" shipmentid="<?php echo $shipment_id; ?>" ><?php echo $containerdest; ?></a> 

и писать код яваскрипта, как показано ниже (при условии, что вы включили файл библиотеки JQuery)

<script> 
$(document).ready(function(){ 
     var url = location.pathname; 
     var arr = mystr.split("/"); 
     var id = arr[2]; 
     $(#shipment'+id).attr('shipmentid'); 
     $('.menu').removeClass('active'); //this will remove all active class after page loading 
     $('#shipment'+id).addClass('active'); // this will append active class to the current clicked menu 
     }); 
</script>