更改导航图标

时间:2017-09-13 17:09:02

标签: javascript jquery

我的页面下面有以下导航:

<ul class="fa-ul" id="filter">
    <li><i class="fa-li fa fa-folder-o"></i><a href="{{route('fotoindex')}}">Semua Foto</a></li>
    @forelse($albums as $al)
    <li><i class="fa-li fa fa-folder-o"></i><a href="{{route('fotofilter', $al->slug)}}" name="album">{{$al->nama}}</a></li>
    @empty
    @endforelse
</ul>

在浏览器中使用以下代码打开给定active元素中的网址时,我已设法将a类添加到a元素:

<script type="text/javascript">
    jQuery(function($) {
        var path = window.location.href;
        $('#filter li a').each(function() {
            if (this.href === path) {
                $(this).addClass('active');
            }});
    });
</script>

现在我想知道如何更改i元素图标类?让我们说如果网址被打开我想将图标类从fa-li fa fa-folder-o更改为fa-li fa fa-folder-open-o

全部,谢谢!

1 个答案:

答案 0 :(得分:0)

$('#filter li a').each(function() {
  if (this.href === path) {
    $(this).siblings('i').removeClass("fa-folder-o").addClass("fa-folder-open-o active");
  }
});