html5左侧边导航右边显示页面,bootstrap如何实现左侧导航栏右侧网页

方式一：采用iframe,即将网页放入iframe这个容器中。

方式二：采用div的话绑定a或者li的点击事件阻止a的默认行为，用jquery的load()可以来加载这个div，即将网页放入div中。

方式三：angular的嵌套路由也可以实现。不过本人对angular不是很了解，所以这种方式没有去试。

方式四：采用ajax技术，实现局部刷新。(本人觉得该方式比较麻烦，就不在这细说了)。

二者的实现方式：

采用iframe的话比较简单，然后再写一个script函数：

var menuClick = function(menuUrl) {

$("#myManu").attr("src",menuUrl);

};

再在添加，就可以实现在左侧菜单点击，加载右边网页。

但是他有一个不好的地方就是，iframe的height要限定，这样的话对不同需求的页面来说就使得不能显示最佳效果。(而且iframe现在也是过时了)。

再看看用div的方式来做的话：首先定义一个div

采用该种方式的话就是代码量也很简洁，而且div会根据网页的内容来填充，就不需要将div的height定死，让其自动填充。使得每个网页的内容显示效果更好一点。但是它也有一个不好的方面，就是div的样式它受父级div的影响。不过你也可以对子级div进行自定义样式。

ps(个人觉得还是采用div的方式会好一点，毕竟页面的显示至关重要。)

还有就是bootstrap3.0中它有这个可以缩放的导航栏，具体使用情况可以去它官网查看文档。

此方法我也用过

效果还是不错的。总之根据自己的需要选择不同的导航栏加载页面方式。

补充一点：用iframe做的话，iframe对应的网页是独立的，不受该页面的样式的影响。

用div做的话，div对应的网页不是独立的，它是嵌入当前页面的，所以div里面的样式会受父级div等的样式的影响。如果div的对应页面和当前页面的css或js都不影响的话，用jquery的load加载div会更好一点。

————————————————

原文链接：https://blog.csdn.net/lantingyue11/article/details/66475758

html5左侧边导航右边显示页面,bootstrap如何实现左侧导航栏右侧网页相关推荐

HTML5期末大作业：商城页面——仿优分购电商静态网页(7个页面) HTML+CSS+JavaScript 电商购物网页HTML代码学生网页课程设计期末作业下载大学生网页设计制作成...
HTML5期末大作业:商城页面--仿优分购电商静态网页(7个页面) HTML+CSS+JavaScript 电商购物网页HTML代码学生网页课程设计期末作业下载大学生网页设计制作成临近期末, 你 ...
后台管理页面通过点击左侧导航栏的菜单项实现右边内容的改变
目录前端页面部分 js代码部分左侧导航栏组菜单项的打开与关闭 url地址跳转地址栏url地址处理 ajax实现右边页面内容变换内容面板上Bootstrap 面包屑导航前端页面部分 <a ...
微信小程序界面从右边滑出_微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动，右侧滑动)...
本文实例讲述了微信小程序MUI侧滑导航菜单.分享给大家供大家参考,具体如下: 实现的目标--YDUI的Popup组件点击列表图标--左侧的菜单栏显示--点击关闭按钮或者右侧的遮罩层--左侧菜单栏关闭 ...
html 左边固定右边自动,css经典布局之左侧固定大小右侧自动适应
本文作者:IMWeb 赛冷思未经同意,禁止转载最近学习了一种经典布局,固定左侧或右侧的宽度,另一侧自适应宽度,此种布局挺常用,尤其是像后台,大部分都是采用这种结构,还比如像订餐类的APP,进入商家 ...
基于bootstrap的后台左侧导航菜单和点击二级菜单刷新二级页面时候菜单展开显示当前菜单...
本文使用的框架版本为: bootstrap3,Jquery2.1.0 (其他jquery可能会报错,菜单项不执行效果如下: 1.在项目中引入框架: <link rel="style ...
bootstrap菜单展开收起_基于bootstrap的后台左侧导航菜单和点击二级菜单刷新二级页面时候菜单展开显示当前菜单...
本文使用的框架版本为: bootstrap3,Jquery2.1.0 (其他jquery可能会报错,菜单项不执行效果如下: 1.在项目中引入框架: 2.自定义样式 .side-nav-item { ...
为什么css导航右边有黑色,一段CSS的导航菜单，为什么有了这个左导航之后，右面的区域用不了了...
满意答案 kiyo1985 推荐于 2016.04.10 采纳率:55% 等级:13 已帮助:29217人添加浮动就可以了 test #nav { width:150px; border-co ...
使用vue做一个“淘宝“项目(显示页面)
显示页面前言:做出底部导航栏目录: 创建项目文件删除原有文件引用资源文件实现底部导航栏显示页面做出首页显示商品栏做出分类一.若想每个导航栏都能显示页面,那必先创建组件在 src- ...
html切换导航不同页面,HTML按钮：导航到其他页面 - 不同的方法
有多种方式可以创建HTML按钮以导航到其他页面.HTML按钮:导航到其他页面 - 不同的方法方法1 Click Me $('#btn_click').on('click', function() { ...

html5左侧边导航右边显示页面,bootstrap如何实现左侧导航栏右侧网页

html5左侧边导航右边显示页面,bootstrap如何实现左侧导航栏右侧网页相关推荐

最新文章

热门文章