用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. js浏览器兼容

    //window.event   IE:有window.event对象   FF:没有window.event对象.可以通过给函数的参数传递event对象.如onmousemove=doMouseMo ...

  2. unbtun python tab补全

    在使用python的时候有时候总是忘记很多代码,这个是作为程序袁最头疼的事情,本人也是刚刚接触python,这几天也是用到这块,所以记录下来,已被需要时能够找到. 我的系统是:  w@w:~$ una ...

  3. mtp

    http://www.android.gs/mount-google-nexus-4-mtp-sd-card-on-ubuntu-and-other-linux-computers/ https:// ...

  4. ios开发证书，描述文件，bundle ID的关系

    苹果为了控制应用的开发与发布流程,制定了一套非常复杂的机制.这里面的关键词有:个人开发者账号,企业开发者账号,bundle ID,开发证书,发布证书(又叫"生产证书"),开发描述文 ...

  5. java中堆和堆栈的区别

    java中堆和堆栈的区别(一) 1.栈(stack)与堆(heap)都是Java用来在Ram中存放数据的地方.与C++不同,Java自动管理栈和堆,程序员不能直接地设置栈或堆. 2. 栈的优势是,存取 ...

  6. iOS-模糊查询

    http://blog.csdn.net/qq_33701006/article/details/51836914 版权声明:本文为博主原创文章,未经博主允许不得转载.   目录(?)[+]   前言 ...

  7. Android手势识别总结

    一:首先,在Android系统中,每一次手势交互都会依照以下顺序执行. 1. 接触接触屏一刹那,触发一个MotionEvent事件. 2. 该事件被OnTouchListener监听,在其onTouc ...

  8. tornado 增加日志模块

    log类 #!/usr/bin/env python # -*- coding:utf-8 -*- import logging.handlers class Logger(logging.Logge ...

  9. yum groupinstall "Development Tools" 批量安装软件

    注:可以通过 yum grouplist 来查看可能批量安装哪些列表 从Windows转到Linux下面,一个不习惯的地方就是在图形界面下安装和删除软件的时候非常缓慢.但是如果你掌握了用yum的命令行 ...

  10. STM32 驱动1602液晶

    利用STM32f103c8t6单片机驱动1602A液晶进行显示功能 上图即为写入信息后的效果图 本人用的是STM32的核心系统,无任何外设 库函数:3.5版本的库函数 驱动模式:采用4线驱动模式 供电 ...