javascript - 单击栏并更改图标颜色时如何激活导航栏

Question

我想在单击栏(事件栏)时更改背景颜色和图标颜色。或者如果不能更改图标颜色，我想用另一种颜色更改图标。这是我的代码，没有改变。

我没有使用“active”类，我使用的是“clicks”类。

我正在为 PHP 框架使用 Codeigniter 和 Bootstrap。

这是我的 CSS

/* Change the color of links on hover */
.navbar-page a:hover {
  background-color: #ddd;
  color: black;
}

/* Add a color to the active/current link */
.navbar-page a.active {
  background-color: #4CAF50;
  color: white;
}

.navbar-page img {
  width: 20%;
  height: 20%;
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 10px 12px;
}

.icons {
  width: 100%;
  height: 100%;
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding-top: 0px;
  padding-bottom: 10px;
  padding-right: 5px;
  padding-left: 5px;
}

/* Style the active class, and buttons on mouse-over
.active, .btn:hover {
  background-color: #666;
  color: white;
}
 */

/* Style the active class */
.active {
  background-color: #D3D3D3;
  color: black;
}

.clicks {
  background-color: #5A5D5A;
  width: 100%;
  height: 100%;
  color: blue;
  border-radius: 12px;
}

#nav li.clicks a {
  background-color: blue;
}

这是我的导航栏代码

<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="application/javascript">
    $(document).ready(function(){
       $('ul li a').click(function(){
        $('li a').removeClass("clicks");
        $(this).addClass("clicks");
        });
    });
</script>

<!-- Links -->
<div class="collapse navbar-collapse" id="nav-content">   
    <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link clicks" href="<?php echo site_url('') ?>"><img class="iconics" src=".\assets\img\icon\home-icon.png" /></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="<?php echo site_url('product') ?>"><img class="icons" src=".\assets\img\icon\product-icon.png" /></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="<?php echo site_url('feed') ?>"><img class="icons" src=".\assets\img\icon\feed-icon.png" /></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="<?php echo site_url('confirm') ?>"><img class="icons" src=".\assets\img\icon\payment-icon.png" /></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="<?php echo site_url('contact') ?>"><img class="icons" src=".\assets\img\icon\contact-icon.png" /></a>
        </li>
    </ul>
</div>

Answer 1

如果您不希望页面重定向并且 js 将添加类，如果页面通过 ajax 或类似方式加载，这将起作用。 event.preventDefault() 将阻止它。

<script type="application/javascript">
    jQuery(document).ready(function($){
       $('ul li a').click(function(e){
        e.preventDefault(); 
        $('li a').removeClass("clicks");
        $(this).addClass("clicks");
        });
    });
</script>

如果你的页面在点击之后重定向，你可以使用php函数添加类

<?php 
$current_url = current_url();
?>
<div class="collapse navbar-collapse" id="nav-content">   
    <ul class="navbar-nav">
        <li class="nav-item">
            <a  class="nav-link <?=(site_url('/')==$current_url)?'clicks':''?>" href="<?php echo site_url('/') ?>"><img class="iconics" src=".\assets\img\icon\home-icon.png" /></a>
        </li>
        <li class="nav-item">
            <a class="nav-link <?=(site_url('product')==$current_url)?'clicks':''?>" href="<?php echo site_url('product') ?>"><img class="icons" src=".\assets\img\icon\product-icon.png" /></a>
        </li>
        <li class="nav-item">
            <a class="nav-link onclicks <?=(site_url('feed')==$current_url)?'clicks':''?>" href="<?php echo site_url('feed') ?>"><img class="icons" src=".\assets\img\icon\feed-icon.png" /></a>
        </li>
        <li class="nav-item">
            <a class="nav-link <?=(site_url('confirm')==$current_url)?'clicks':''?>" href="<?php echo site_url('confirm') ?>"><img class="icons" src=".\assets\img\icon\payment-icon.png" /></a>
        </li>
        <li class="nav-item">
            <a class="nav-link <?=(site_url('contact')==$current_url)?'clicks':''?>" href="<?php echo site_url('contact') ?>"><img class="icons" src=".\assets\img\icon\contact-icon.png" /></a>
        </li>
    </ul>
</div>