• jq 导航栏点击添加/删除类(a标签跳转页面)


    <div class="container-fluid" style="background-color: #1DA7FF">
    <div class="container">
    <div class="row">
    <div class="col-12">
    <nav class="navbar navbar-expand-lg">
    <a class="navbar-brand" href="{:url('index/index/index')}"><img src="__CDN__/assets/imgs/logo2.png"> </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse"
    data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
    aria-expanded="false" aria-label="Toggle navigation">
    <span class="fas fa-bars text-light"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">

    <ul class="navbar-nav ml-auto pr-5" id="nav">
    <li class="nav-item position-relative bar">
    <a class="nav-link text-light" href="{:url('index/index/index')}">
    <span>首页</span>
    </a>
    </li>
    <li class="nav-item position-relative l-hoverbottom">
    <a class="nav-link text-light" href="{:url('index/index/gongneng')}">
    <div class="l-d position-absolute"><i
    class="icon fas fa-pencil-alt position-absolute l-i"></i></div>
    <span>功能</span>
    </a>
    </li>


    <li class="nav-item position-relative l-hoverbottom">
    <a class="nav-link text-light" href="{:url('index/index/customercase')}" tabindex="-1" aria-disabled="true">
    <div class="l-d position-absolute"><i class="icon fas fa-pencil-alt position-absolute l-i"></i></div>
    <span>客户案例</span>
    </a>
    </li>



    </ul>
    <form class="form-inline my-2 my-lg-0">
    <button
    class="btn btn-outline-success btn-sm my-2 my-sm-0 mr-2 mr-sm-2 bg-success text-light border-o"
    type="submit"><a href="{:url('index/login/login')}">登录</a>
    </button>
    <button
    class="btn btn-outline-success btn-sm my-2 my-sm-0 bg-primary text-light border-0"
    type="submit"><a href="{:url('index/login/register')}">注册</a>
    </button>
    </form>
    </div>
    </nav>
    </div>
    </div>
    </div>
    </div>





    <script type="text/javascript">
    $('#navbarSupportedContent .nav-item').click(function(){
    $(this).addClass('nav-active').siblings('.nav-item').removeClass('nav-active');
    });

    //通过地址把菜单栏变色
    $(function(){
    var href=window.location.href;
    var lastHref=href.substring(href.lastIndexOf('/')+1);
    $('#navbarSupportedContent .nav-item').each(function(i){
    var hrefNav=$('a',this).attr('href');
    var lastHrefNav=hrefNav.substring(hrefNav.lastIndexOf('/')+1);
    if(lastHref==lastHrefNav){
    $(this).addClass('nav-active');
    }
    });
    });

    </script>
  • 相关阅读:
    离线安装MariaDB 10.4.13
    YUM 的使用
    Crontab 定时任务
    静默安装卸载 ORACLE
    java 改变图片的DPI
    Java TIF、JPG、PNG等图片转换
    key可重复的Map
    集合对象去重
    Java创建TXT文件并写入 内容
    Java已知图片路径下载图片到本地
  • 原文地址:https://www.cnblogs.com/lvqiupingboke-2019/p/14178495.html
Copyright © 2020-2023  润新知