用js的做法也很多。比较推荐的方法是判断当前的url，然后根据url在nav中的位置，来对nav中的某个导航增加选中样式，代码如下：

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <title>Document</title>

 </head>

 <body>

<style>

.active {

    color: red;

}

</style>

<ul id="tab2">

    <li><a href="index.html">首页</a></li>

    <li><a href="news.html">新闻</a></li>

    <li><a href="about.html">关于</a></li>

    <li><a href="job.html">工作</a></li>

    <li><a href="ad.html">广告</a></li>

    <li><a href="contactus.html">联系我们</a></li>

</ul>

<script>

//这里的js, 可以做为一个外部的JS文件, 然后由上面这些页面统一引入即可.

(function(){

    var tDiv = document.getElementById("tab2"),

        links = tDiv.getElementsByTagName("a"),

        index = 0,//默认第一个菜单项

        url = location.href.split('?')[0].split('/').pop();//取当前URL最后一个 / 后面的文件名，pop方法是删除最后一个元素并返回最后一个元素

    if(url){//如果有取到, 则进行匹配, 否则默认为首页(即index的值所指向的那个)

        for (var i=links.length; i--;) {//遍历 menu 的中连接地址

            if(links[i].href.indexOf(url) !== -1){

                index = i;

                break;

            }

        }

    }

    links[index].className = 'active';

})();

</script>

 </body>

</html>

js控制公共模板中，不同页面中的导航选中效果-判断当前的url的更多相关文章

  1. Visual Studio 2013新建ASP.NET项目使用Empty模板，在页面中使用验证控件出错的解决方案

    Visual Studio 2013新建ASP.NET项目使用Empty模板,在页面中使用验证控件,运行页面,会出现如下的错误: 错误原因 VisualStudio 2012(或2013) WebFo ...

  2. Js控制显示、隐藏文本框中的密码

    Js控制显示.隐藏文本框中的密码,也可称为是一款小型的JavaScript星号密码破解器,点击会显示出密码类型的文本框中的真实信息,再次点击则还原,程序 主要是获取HTML元素对象,然后强制更改元素属 ...

  3. thinkphp中view页面中的volist标签转化为原生php分析（多去看源代码，你会发现不仅简单，方便你理解，还节约时间）

    thinkphp中view页面中的volist标签转化为原生php分析(多去看源代码,你会发现不仅简单,方便你理解,还节约时间) 一.总结 1.标签和原生php之间的关系:标签只是为了方便你使用,标签 ...

  4. FineUI中在一个页面中通过控件事件(JS)向父页面中添加Tab页

    1.在前台页面尾部添加js代码 </form>    <script type="text/javascript">        var basePath ...

  5. Django把现在时间写入数据库，模板渲染在页面中

    1. 导入time模块 import time 2. 获取现在时间,使用"年-月-日 时:分:秒"这样的模板,赋值给变量 在views.py中: pt = time.strftim ...

  6. js控制html5 【video】标签中视频的播放和停止

    需求:页面中有2个普通按钮a,b.还有一个video标签,能成功播放出视频..我想要的效果是,点击a按钮,视频开始播放,点击b按钮,视频播放停止!!!<br><br>----- ...

  7. js控制iframe的刷新（页面局部刷新）

    今天遇到个问题,后台会员审核之后,页面内的会员审核状态要及时改变,但又不能指望用户手动刷新(用户体验很不好) 如果审核页面和显示审核状态时同在一个html页面的话,那么直接用js改变div内部的文本就 ...

  8. js中对radio和checkbox是否选中的判断

    一.js判断checkbox 例如:<div class="checkbox" style="width: 150px;"> <label&g ...

  9. 微信小程序中在页面中实现下拉刷新显示提醒语后在消失

    最近在做小程序的时候遇见一个问题,就是页面要下拉刷新给客户一个提醒语,查看了小程序的官方文档 这里有个注意点:如果你是一页进行下拉刷新就在那个文件夹的json里面加上"enablePullD ...

随机推荐

  1. windows下强大的wmic命令行工具

    windows最令网管诟病的地方就是命令行没有unix和linux强大.但这种情况正在不断改观,windows命令行也越来越强大了.其中,微软耗费大量精力打造的wmi就是一例.  获得进程ID与进程名 ...

  2. 算法录 之 BFS和DFS

    说一下BFS和DFS,这是个比较重要的概念,是很多很多算法的基础. 不过在说这个之前需要先说一下图和树,当然这里的图不是自拍的图片了,树也不是能结苹果的树了.这里要说的是图论和数学里面的概念. 以上概 ...

  3. MFC-----在MFC中使用Picture控件加载任意图片

    对于刚刚接触OpenCV的童鞋来说,如何在MFC中加载并显示一张图片.应该是初期必定会碰到的问题之一.因此本文在分享这方面经验的同时,也相当于是写给自己的一份备忘录. 本文使用的是OpenCV2.1+ ...

  4. Bootstrap Table的使用

    前言:BootstrapTable基于Bootstrap,Bootstrap基于jquery,所以需要引入jquery后再引入bootstrap. <link href="${ctx} ...

  5. 使用msm文件创建msi

    一.不使用merge module的ModuleSubstitution和ModuleConfiguration 1.创建MyMsm.msm <?xml version="1.0&qu ...

  6. Linux如何正确关机

    其实,在Linux领域内大多用在服务器上,很少遇到关机的操作.毕竟服务器上跑一个服务是永无止境的,除非特殊情况下,不得已才会关机. Linux和windows不同,在 Linux 底下,由于每个程序( ...

  7. Spark 的combineByKey函数

    在Spark中有许多聚类操作是基于combineByKey的,例如group那个家族的操作等.所以combineByKey这个函数也是比较重要,所以下午花了点时间看来下这个函数.也参考了http:// ...

  8. ZOJ 3929 Deque and Balls

    答案=所有情况中总共递减次数*2 放完i个和放完i-1个之间的递减次数是可以递推的. 有一部分是放完i-1个之后产生的,还有一部分是放完第i个之后新产生的. 注意减去多加的部分. 2的i次方可以打个表 ...

  9. C# GridView Edit & Delete, 点击Delete的时候弹出确认框

    1. 使用GridView自带属性ShowEditButton和ShowDeleteButton,均设为True  <Columns> ... <asp:CommandField S ...

  10. android NDK编译(导入).a文件和编译多个so文件（转）

    源:android NDK编译(导入).a文件和编译多个so文件 一.编译一个静态库 libstatic_android.a LOCAL_PATH := $(call my-dir) include ...