zoukankan      html  css  js  c++  java
  • 公用导航栏的根据url控制选中导航js

    例如公用导航:

    <ul class="nav navbar-nav" id="navTab">
            <li><a href="index.html">设备</a></li>
            <li><a href="controll.html">控制</a></li>
            <li><a href="task.html">任务</a></li>
            <li><a href="data.html">数据</a></li>
            <li><a href="source.html">素材</a></li>
            <li><a href="apply.html">应用</a></li>
     </ul>

    //根据url判断 来实现导航选中效果js
    $(function(){
        var tDiv = $("#navTab");
        var links = $("#navTab").find("a");
        index = 0,//默认第一个菜单项
        url = location.href.split('?')[0].split('/').pop();//取当前URL最后一个 / 后面的文件名,pop方法是删除最后一个元素并返回最后一个元素
        if(url){//如果有取到, 则进行匹配, 否则默认为首页(即index的值所指向的那个)
            for (var i=0 ; i< links.length; i++) {//遍历 menu 的中连接地址
                if(links[i].href.indexOf(url) !== -1){
                    index = i;
                    break;
                }
            }
        }
        links[index].parentNode.className = 'active';
    });

  • 相关阅读:
    git 强制覆盖本地
    .gitignore 配置
    Git fetch和git pull的区别
    时间函数 date strtotime
    page show
    prepare PDO
    Lucene搜索方法总结
    lucene索引日期和数字
    lucene 3.0.2 + 多文件夹微博数据(时间,微博)构建索引
    lucene 使用注意
  • 原文地址:https://www.cnblogs.com/kevoin/p/6593353.html
Copyright © 2011-2022 走看看