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

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;

    });

});