用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. eclipse proxy

    -Dorg.eclipse.ecf.provider.filetransfer.excludeContributors=org.eclipse.ecf.provider.filetransfer.ht ...

  2. PAT (Advanced Level) 1019. General Palindromic Number (20)

    简单题. #include<iostream> #include<cstring> #include<cmath> #include<algorithm> ...

  3. Java内存回收 - 落日之心的日志 - 网易博客

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  4. 用Quick Cocos2dx做一个连连看（三）

    做个日记吧. 最近比较忙,斗志也不高,昨天有点时间了,开始做了一下连接方法,一开始用的搜索算法,但是bug比较多,究其原因是对语法和算法都不是很熟悉. 然后昨天下午利用点时间用稍微通俗一点的连接算法, ...

  5. 静态方法List

    public class Country { public static List<Country> CountryList = new List<Country> { new ...

  6. 原生js的各种方法

    原生js操作dom元素 var link = document.createElement( "link" );link.type = "image/x-icon&quo ...

  7. linux动态链接库---一篇讲尽

    一般我们在Linux下执行某些外部程序的时候可能会提示找不到共享库的错误, 比如: tmux: error while loading shared libraries: libevent-1.4.s ...

  8. Spring ---annotation (重点)--AutoWired 不常用

    1. 默认按类型 by type, 如果想用byname, 使用@Qualifier 2. 如果写在set上, @qualifier需要写在参数上 bean.xml: 默认bytype去找set方法, ...

  9. c++几个新特性

    template 模板 1.出于通用性考虑,程序库中几乎所有东西都被设计为template形式,不支持template几乎不能使用标准程序库. 2.所谓template,是针对"一个或多个尚 ...

  10. FZU 2112 Tickets

    这个问题可以转变一下,先要知道有几个连通块,连通块之间肯定需要添加一条边, 还需要知道每个连通块内部需要添加几条边,这个问题等价于求一张图至少需要几笔画成,这个问题的答案是度为奇数的点的个数/2 #i ...