11 个回答

写一个index.html,把头部底部内容用css固定,中间留一个空白区容器,需要切换的内容可以用html分开来写,点击头部导航的时候用jquery的load(url)的方法,$(容器).load(url),用不同的子页面html替换中间空白区的内容,不同子页面引用不同的js,不会有影响。公用的css可以放在index.html里面,所有子页面都可以用。

首先,很感谢你邀请我来回答问题,对于这个问题我个人有以下几种解决方法:

1、采用单页面的方式,内容都写在页面中,初始化时,仅显示当前内容,其他内容隐藏,通过点击导航条来切换需要显示的内容(类似于选项卡,用js,jQuery实现都很简单)。

2、采用iframe的方式,要显示的内容在主html中,内容显示在html的iframe标签中,通过改变iframe的src来加载不同的内容(不是很推荐使用)。

3、你也可以使用框架,像比较简单易学的vue.js,你可以通过配置路由达到点击导航栏切换不同内容的效果;当然了,像angular,react都可以,这就看题主的喜欢了。

最后说点题外话,我看了下题主的导航栏,有点想法,我觉得你可以把所有内容都在当前页面显示出来,给导航栏加上锚点(或者你可以通过设置scrollTop),点击就滚动到相应的内容区。

可以用vue.js

ifarme 或者include 你开心就好

这要看你的页面结构了啊,如果跳转页面肯定是要动的,如果不跳转只更新中间一部分的数据,那上下肯定是不动的啊。
像你说的这种,肯定是点击导航栏之后更新了中间一部分的数据。或者进行了页面跳转,但是跳转页面和原页面具有相同的头部和尾部。

iframepjax以及各种MMVM

也可以这样,拆文件(jsp方案)

<jsp:include page="/tiles/nav.jsp" flush="true" />
<div class="container">
中间变化内容
</div>
<jsp:include page="/tiles/footer.jsp" flush="true" />

如果不跳转页面建议使用pjax;
跳转页面的话直接固定header和footer,CSS position fixed

谢邀!我最近写了一个官网类似这样的,我整理一下发出来。单页面官网
你也可以写个顶部和底部,中间的内容区用swiper固定高度轮播实现基于swiper的Tab选项卡

这个,一般都是用模板引擎来实现,或者是一些自带模板功能的框架,现在前端流行的框架基本都能实现。如果完全不用框架和模板功能,你也可以自己封装成一个插件,把头部和底部封装起来,每个页面引入一下就好了

方法一:这个只是个切换版,如果是静态html页面,同时嫌编写页面太麻烦,也已采用Bootstrap帮助开发,可以轻松实现楼主所要的切换版效果。
方法二:如果楼主js和css技术过关,同时jquery运用灵活自如,可以自己实现锚点的形式,通过点击页首导航进行切换显示内容。
Thanks & Regards

你知道吗?

宣传栏