如何在点击时激活动态侧边栏

Question

I'm creating dynamic menu. I wanted to highlight the menu once it is selected. We use php. just need to figure out how to append the class active to the current page. Can anyone help me with this?

  <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

Change your html line with below line

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

And write javascript code as below (assuming you have included jquery library file)

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