用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. IndiaHacks 2016 - Online Edition (Div. 1 + Div. 2) B. Bear and Compressing

    B. Bear and Compressing 题目链接  Problem - B - Codeforces   Limak is a little polar bear. Polar bears h ...

  2. JavaScript（三）---- 控制流程语句

    常用的控制流程语句有判断语句.分支语句.循环语句.基本用法都和java中的一致,switch有几点特殊. 1.判断语句 格式:        if(判断条件){            符合条件执行的代 ...

  3. deb安装了些啥？

    http://www.cyberciti.biz/faq/view-contents-of-deb-file/

  4. myEclipse 8.5下SVN环境的搭建

    myEclipse 8.5下SVN环境的搭建 在应用myEclips 8.5做项目时,svn会成为团队项目的一个非常好的工具,苦苦在网上寻求了一下午,终于整合好了这个环境,在这里简单介绍下,希望能为刚 ...

  5. HDU 5616 Jam's balance

    背包.dp[i]=1表示i这种差值能被组合出来,差值有负数,所以用sum表示0,0表示-sum,2*sum表示sum. 询问X的时候,只需看dp[sum+X]或者dp[sum-X]是否有一个为1,注意 ...

  6. Unity3d之流光效果

    所谓流光效果,如一个图片上一条刀光从左闪到右边,以下为实现代码: c#代码: using System; using UnityEngine; public class WalkLightEffect ...

  7. python处理时间--- datetime模块

    1   Python提供了多个内置模块用于操作日期时间,像calendar,time,datetime.time模块我在之前的文章已经有所介绍,它提供的接口与C标准库time.h基本一致.相比于tim ...

  8. 自然语言处理高手_相关资源_开源项目（比如：分词,word2vec等）

    (1) 中科院自动化所的博士,用神经网络做自然语言处理:http://licstar.net (2) 分词项目:https://github.com/fxsjy/jieba(3) 清华大学搞的中文分词 ...

  9. Mac OS10.11更新ruby，gem，安装cocoapods

    1.装cocoapods,ruby版本忒低->开始更新ruby->开始更新gem,这是一条不归路啊同志们,各种permission denied,各种路径不存在,各种路径没有读写权限,各种 ...

  10. iOS开源库--最全的整理 分类： ios相关 2015-04-08 09:20 486人阅读 评论(0) 收藏

    youtube下载神器:https://github.com/rg3/youtube-dl 我擦咧 vim插件:https://github.com/Valloric/YouCompleteMe vi ...