用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. Struts2--ModelDriven接收参数

    1. JSP文件调用格式: <a href="user/user!add?name=a&age=8">添加用户</a> 2. struts.xml文 ...

  2. 字符串的妙用之拼出花样的sql

    条件写在前面 string sqlrequirement =""; if(dtp_sta.text==""&&dtp_end.text==&qu ...

  3. EasyUi之datagird解读

    1.其json格式需要为:  JSON Code  1234567891011121314151617181920212223   {     ,     "rows": [    ...

  4. PHP 页面缓冲函数

    1.flush:刷新缓冲区的内容,输出.函数格式:flush()说明:这个函数经常使用,效率很高.2.ob_start :打开输出缓冲区函数格式:void ob_start(void)说明:当缓冲区激 ...

  5. hibernate--coreapi--configuration sessionfactory--getcurrentsession--opensession

    sessionfactory的目的:产生session,维护数据库连接池 测试文件里的sessionfactory创建数据库连接,所以sessionFactory通过配置文件里的配置信息产生一个数据库 ...

  6. ionic系列

    1. 推荐中文API https://github.com/ychow/ionic-guide

  7. 原生js的各种方法

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

  8. 不同版本的mysql字符集的默认编写

    原来在5.1版本时,为了解决中文乱码问题设置默认字符集为utf8时,在my.ini内的 [mysql] 和 [mysqld] 项中都是写: default-character-set=utf8 到了5 ...

  9. ubuntu升级php版本

    如果安装的 PHP 版本过低的话,可以通过下面的指令来升级: sudo add-apt-repository ppa:ondrej/php5   sudo apt-get update   sudo  ...

  10. coreGraphs和动画

    http://www.jianshu.com/p/b71c3d450e8e http://blog.csdn.net/volcan1987/article/details/9969455 http:/ ...