javascript - 使元素在导航栏上处于事件状态

Question

这是我的侧边栏页面代码

<ul class="nav">
    <li><a href="<?php echo Config::get('url'); ?>dashboard.php" class="element active"><i class="lnr lnr-home"></i> <span>Dashboard</span></a></li>
    <li><a href="<?php echo Config::get('url');?>company.php" class="element"><i class="lnr lnr-chart-bars"></i> <span>Company Detail</span></a></li>
    <li><a href="<?php echo Config::get('url'); ?>address.php" class="element"><i class="lnr lnr-chart-bars"></i> <span>Address Book</span></a></li>
    <li><a href="<?php echo Config::get('url'); ?>product.php" class="element"><i class="lnr lnr-cog"></i> <span>Products</span></a></li>
    <li><a href="<?php echo Config::get('url'); ?>bill.php" class="element><i class="lnr lnr-alarm"></i> <span>Invoice</span></a></li>
</ul>

当用户点击公司链接时，我希望公司有事件类(class)，为此我有以下脚本代码:

  <script>
    var btns = document.getElementsByClassName("element");
    console.log(btns);
    for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
    });
    }
     </script>

因此，当公司页面加载时，它会将事件类重置回仪表板。

如何将事件类应用于侧边栏的元素？任何帮助将不胜感激。

Answer 1

<ul class="nav">
 <li>
     <a href="<?php echo Config::get('url'); ?>dashboard.php" class="element<?='http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'] == (Config::get('url') . 'dashboard.php') ? ' active' : ''?>">
         <i class="lnr lnr-home"></i> 
         <span>Dashboard</span>
     </a>
 </li>
 <li>
     <a href="<?php echo Config::get('url');?>company.php" class="element<?='http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'] == (Config::get('url') . 'dashboard.php') ? ' active' : ''?>">
         <i class="lnr lnr-chart-bars"></i>
         <span>Company Detail</span>
     </a>
 </li>
 <li>
     <a href="<?php echo Config::get('url'); ?>address.php" class="element<?='http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'] == (Config::get('url') . 'address.php') ? ' active' : ''?>">
         <i class="lnr lnr-chart-bars"></i> 
         <span>Address Book</span>
     </a>
 </li>
 <li>
    <a href="<?php echo Config::get('url'); ?>product.php" class="element<?='http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'] == (Config::get('url') . 'product.php') ? ' active' : ''?>">
        <i class="lnr lnr-cog"></i> 
        <span>Products</span>
    </a>
 </li>

 <li>
     <a href="<?php echo Config::get('url'); ?>bill.php" class="element<?='http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'] == (Config::get('url') . 'bill.php') ? ' active' : ''?>">
        <i class="lnr lnr-alarm"></i> 
        <span>Invoice</span>
     </a>
 </li>
</ul>