bootstrap选项卡如果直接在每一个选项div中直接插入页面,可以使用<object type="text/html" data="test.html">或者<iframe>标签,但是会出现问题:

可以看到页面被限制在某一个特别小的地方,无法正常显示。

解决办法:使用jquery手动往每一个tab-pane里添加页面

$(function () {
// tabs数据
var tabsData = [{
"id": "company_regist_page",
"url": "company_regist.html"
},{
"id": "collegeadmin_regist_page",
"url": "collegeadmin_regist.html"
},{
"id": "collegestudent_regist_page",
"url": "collegestudent_regist.html"
},{
"id": "judge_regist_page",
"url": "judge_regist.html"
}];
// 遍历json数组,循环添加a标签click事件
$(tabsData).each(function () {
console.log(this.id + "---->" + this.url);
$("a[href='#" + this.id + "']").bind('click', {
id: this.id,
url: this.url
}, tabsHandler);
});
});
function tabsHandler(event) {
var data = event.data;
showTabs(data.id, data.url);
return false; // 阻止默认a标签相应
} /***
* 激活tab选项卡并使用ajax异步加载内容
* @param {object} tabsId
* @param {object} url
*/
function showTabs(tabsId, url) {
$("a[href='#" + tabsId + "']").tab('show');
var $tabContent = $('#' + tabsId);
$tabContent.load(url);
}

html代码:

<div class="nav-tabs-vertical">
<ul class="nav nav-tabs nav-tabs-line" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#company_regist_page" aria-controls="company_regist_page" aria-selected="true">
企业机构注册
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#collegeadmin_regist_page" aria-controls="collegeadmin_regist_page" aria-selected="false">
高校负责人注册
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#collegestudent_regist_page" aria-controls="collegestudent_regist_page" aria-selected="false">
高校学生注册
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#judge_regist_page" aria-controls="judge_regist_page" aria-selected="false">
评委注册
</a>
</li>
</ul>
<div class="tab-content" id="regist_page">
<div class="tab-pane active" id="company_regist_page" role="tabpanel">
</div>
<div class="tab-pane" id="collegeadmin_regist_page" role="tabpanel">
</div>
<div class="tab-pane" id="collegestudent_regist_page" role="tabpanel">
</div>
<div class="tab-pane" id="judge_regist_page" role="tabpanel">
</div>
</div>
</div>

执行结果:

bootstrap如何设置每一个选项卡对应一个页面的更多相关文章

  1. Android 用Fragment创建一个选项卡

    本文结合之前的动态创建fragment来进行一个实践,来实现用Fragment创建一个选项卡 本文地址:http://www.cnblogs.com/wuyudong/p/5898075.html,转 ...

  2. tkinter如何设置界面消失 当制作一个登陆界面时,登陆成功之后,如何让登陆界面本身消失

    tkinter如何设置界面消失 当制作一个登陆界面时,登陆成功之后,如何让登陆界面本身消失 if querySQL.checkAll():#用户名和密码都输入正确 self.root.withdraw ...

  3. 设置一个按钮为一个图片,不要border

    //设置一个按钮为一个图片,不要border ImageIcon searchIcon = ImageToolkit.loadImageIcon(/search.png"); ImageIc ...

  4. request设置属性 一般当做下一个页面的结果集

    request设置属性 一般当做下一个页面的结果集

  5. 为什么button在设置标题时要用一个方法,而不像lable一样直接用一个属性

    为什么button在设置标题时要用一个方法.而不像lable一样直接用一个属性 原因是有时我们对      button做一次点击,须要改变button的标题.仅仅实用方法才干做到,而label是标签 ...

  6. vue.js 作一个用户表添加页面----初级

    使用vue.js 制作一个用户表添加页面,实际上是把原来需要使用js写的部分,改写成vue.js的格式 首先,想象一下,先做思考,我们要添加用户表,设涉及到哪些数据,一个是用户id,一个是用户名,一个 ...

  7. 一个小时搭建一个全栈 Web 应用框架

    把想法变为现实的能力是空想家与实干家的区别.不管你是在一家跨国公司工作,还是正在为自己的创业公司而努力,那些有能力将创意转化为真正产品的人,都具有宝贵的技能并拥有明显的实力.如果你能在不到一个小时的时 ...

  8. k8s1.11.0安装、一个master、一个node、查看node名称是主机名、node是扩容进来的、带cadvisor监控服务

    一个master.一个node.查看node节点是主机名 # 安装顺序:先在test1 上安装完必要组件后,就开始在 test2 上单独安装node组件,实现node功能,再返回来配置test1加入集 ...

  9. k8s1.11.0安装、一个master、一个node、查看node名称是ip、node是扩容进来的、带cadvisor监控服务

    一个master.一个node.查看node节点是ip # 安装顺序:先在test1 上安装完必要组件后,就开始在 test2 上单独安装node组件,实现node功能,再返回来配置test1加入集群 ...

随机推荐

  1. Django模板及路由的配置

    学习内容: (1)路由的配置 (2)模板的介绍 (3)模板显示数据 一.路由的配置 以上一篇文章的名字Booketest项目,有一个子模块demo1进行讲解. 1.首先在Booktest项目下的同名子 ...

  2. WebApplicationInitializer初始化web应用,不需要web.xml

    web应用的上下文层次结构 很多时候加的切面不起作用,是因为加错地方了 1.直接初始化,上下文只有一个context import org.springframework.web.WebApplica ...

  3. 动态规划-国王的金矿问题java

    紧接着上一篇动态规划问题,现在我们开始探讨一个新的问题,问:有一个发现了5个金矿,每一个金矿的储量不同,需要参与挖掘的工人数也不通,参与挖矿工人的总数量是10人,每一座金矿要么全挖,要么不挖,不能派一 ...

  4. stack的使用-Hdu 1062

    Text Reverse Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tota ...

  5. 「HAOI2011」Problem c

    「HAOI2011」Problem c 传送门 由于这道题本人讲得不好,可以参考这位dalao的博客 我可就直接上代码了... 参考代码: /*---------------------------- ...

  6. 使用Servlet处理AJAX请求

    AJAX用于异步更新页面的局部内容. ajax常用的请求数据类型 text    纯文本字符串 json    json数据 使用ajax获取text示例 此种方式常用于前端向后台查询实体的一个属性( ...

  7. Python 爬取的类封装【将来可能会改造,持续更新...】(2020年寒假小目标09)

    日期:2020.02.09 博客期:148 星期日 按照要求,我来制作 Python 对外爬取类的固定部分的封装,以后在用 Python 做爬取的时候,可以直接使用此类并定义一个新函数来处理CSS选择 ...

  8. 在javaweb中从servlet端向jsp端传递数据的方法

    1.servlet端: request.setAttribute("student", student)://向请求域中添加名称为student,内容为student中内容的数据( ...

  9. spark实验(二)--scala安装(1)

    一.实验目的 (1)掌握在 Linux 虚拟机中安装 Hadoop 和 Spark 的方法: (2)熟悉 HDFS 的基本使用方法: (3)掌握使用 Spark 访问本地文件和 HDFS 文件的方法. ...

  10. 「快学springboot」SpringBoot多环境配置文件

    前言 我们都知道springboot的配置卸载application.properties配置文件上(或者application.yml).但是,如果想要把不同的环境(如开发环境,测试环境,生产环境) ...