如何在多个页面共用一个导航

Question

1、多个页面有共同的导航，导航中包含a标签可以跳转到别的页面，怎么实现导航的共用
2、点击导航中的某一项，添加背景色

Answer 1

纯js的话也可以. 用iframe嵌套单独的导航页面如: nav.html 然后js控制点击a标签后顶层窗口跳转:

<!-- 父页面html -->
<iframe src="nav.html" frameborder="0" width="100%" height="70"></iframe>

//子页面js
$(function () {
    $('.nav a').on('click', function() {
        var _ = $(this);
        var url = _.attr('href');

        //点击a跳转页面
        location.href = url;

        //添加背景色 css设置a.on { background: #09e; color: #fff; }
        _.addClass('on').siblings('a').removeClass('on');
        return false;
    });
});

Answer 2

1、共用的导航单独存放一个文件，需要使用的时候引入
2、如果模板是直接数据渲染的话，为到2的目的需要php传一个值用于标志是当前页面，如首页可传cur=>index

Answer 3

1.如果你的开发环境是php，那么可以把导航的html切出来，单独存放一个文件，在需要的页面include进去

2.应该是想要个actived效果吧，可以写个js，获取当前地址的url，与点击的a标签的href进行匹配，如果url包含了href，则激活当前项的样式，别的项的样式则变为普通