Question

我在laravel中使用以下菜单栏。我点击它时需要突出显示当前菜单项。

<div class="col-sm-3 col-md-2 sidebar">
    <ul class="nav nav-sidebar">
        <li style="margin-left:20px;">
            {{--<img src="{{ Auth::user()->getAvatarUrl() }}" height="50" width="50" style="border-radius:25px;" />--}}
        </li>
        <li><a href="#"> @ {{ Auth::user()->name }}</a></li>
        <li class="active"><a href="#">PREGO<span class="sr-only">(current)</span></a></li>
        <li><a href="#">Edit Account</a></li>
        <li><a href="{{ route('projects.index') }}">Projects</a></li>
        <li><a href="{{ route('collaborators.form', $project)}}">Collaborators</a></li>
        <li><a href="#">Todos</a></li>
    </ul>
    <ul class="nav nav-sidebar">
        <li><a href="">Account</a></li>
        <li><a href="">Help</a></li>
        {{--<li><a href="{{ route('auth.logout') }}">Sign Out</a></li>--}}
    </ul>
</div>

怎么办呢？

Answer 1

我认为如果你设计.active类会做你想做的事情

.active{
 /*add hear what you would like to change for example*/
background-color:red;
}

Answer 2

这是活动列表的另一种方式之一。可能

Jquery的：

<script>
  $('.nav-sidebar').on('click','li', function(){
    $(this).addClass('active').siblings().removeClass('active');
  });
</script>

还有一件事你不在代码中添加.active类。之后你必须包装你的css属性，如

<style>
 .nav-sidebar li.active{
  /*your css code here*/
 }
</style>

Answer 3

您将在css文件中编写代码。可能

.nav-sidebar li.active{
 /*your code here*/
}

这也是激活当前活动菜单的方法之一。

如何在css中突出显示我当前的菜单项

3 个答案: