最近遇到一个问题,是关于bootstrap中的标签页实现上的一些功能实现,现总结一下。

问题描述:点击其他标签页后,如何在点击搜索按钮后自动跳转到第一个标签页。如下图

通过对bootstrap框架里的对选项卡操作的代码后,发现简单的用一句 $(".nav-tabs a:first").tab('show');即可实现。具体代码如下:

     $("#search").click(function(){              //单击搜索按钮
         var systems = $("#system").val();
         var beginTimes = $("#beginTime").val();
         var endTimes = $("#endTime").val();
         getTaskList(systems,beginTimes,endTimes,'Task',1);
         $(function(){
             $(".nav-tabs a:first").tab('show');
         });

     }); 

bootstrap中,对标签页操作的代码:

 $(function () {
 $("#tabs1 a").click(function (e) {
 $(this).tab('show');
 });
 $("#tabs2 a").click(function (e) {
 $(this).tab('show');
 });
 $("#tabs3 a").click(function (e) {
 $(this).tab('show');
 });
 $("#tabs4 a").click(function (e) {
 $(this).tab('show');
 });
 });

bootstrap 下 标签页跳转总结的更多相关文章

  1. selenium+python 浏览器标签页跳转 switch_to_window

    浏览器页面跳转方法记录: from selenium import webdriver import time browser = webdriver.Chrome() first_url='http ...

  2. 使用session处理用户搜索后数据的上一页和下一页跳转

    搜索语句界面: /*单一检索:此处为一个下拉列表的检索*/ if(isset($_POST['submit']) && $_POST['submit'] == '点击搜索') { if ...

  3. PHPCMSv9首页显示分页点击下一页跳转链接出现错误,跳转到后台的解决方案

    1 引用页写为 {pc:content action="lists" catid="10" order="updatetime DESC" ...

  4. bootstrap tab标签页

    <ul id="myTab" class="nav nav-tabs"> <li class="active"> & ...

  5. .Net MVC 标签页

    目录 Bootstrap的标签页 适合.Net MVC的标签页 Bootstrap的标签页 下面是Bootstrap的标签页,挺好的,但是用的id,内容是固定的?我不知道怎么变成不同的视图来 < ...

  6. Bootstrap历练实例:标签页内的下拉菜单

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  7. Bootstrap入门(二十七)JS插件4:标签页

    Bootstrap入门(二十七)JS插件4:标签页 标签页的切换可以带动内容的变化 首先我们引入CSS文件 <link href="bootstrap.min.css" re ...

  8. Bootstrap入门(十二)组件6:导航标签页

    Bootstrap入门(十二)组件6:导航标签页   1.标签页 2.胶囊式标签页 3.垂直展示 4.两端对齐的标签页 5.禁用的链接 6.添加下拉菜单   先引入本地的CSS文件和JS文件(注:1. ...

  9. Bootstrap -- 插件: 模态框、滚动监听、标签页

    Bootstrap -- 插件: 模态框.滚动监听.标签页 1. 模态框(Modal): 覆盖在父窗体上的子窗体. 使用模态框: <!DOCTYPE html> <html> ...

随机推荐

  1. Http(2)

    1.传递的请求参数如何获取 GET方式: 参数放在URI后面 POST方式: 参数放在实体内容中 核心的API: request.getParameter("参数名");  根据参 ...

  2. Javascript从入门到精通(一)

    第一篇   基础知识 一.JavaScript的主要特点:1.解释性:不同于一些编译性的程序语言(如C.C++等),它是一种解释性的程序语言,它的源代码不需要经过编译,而是直接在浏览器中运行时被解释. ...

  3. CSS Sprites的详细使用步骤

    一.把小图放在一张大图中,先排版好.上几张图看看,就比如这个: 谷歌: 淘宝: 土豆右下角悬浮框: 1.把用到的小图都放到了一张大图里,其中的小图之间的排版是有点规律的,比如说淘宝那张,类似的小图放置 ...

  4. WinForm MessageBox 提示对话框

    public class MessageUtil { /// <summary> /// 显示一般的提示信息 /// </summary> /// <param name ...

  5. WPF passwordbox 圆角制作

    将以下节点复制到app.xaml的<Application.Resources>节点下 <Style TargetType="PasswordBox">   ...

  6. PHPExcel的读取excel的操作

    首先导入类库: require_once 'PHPExcel.php'; require_once 'PHPExcel\IOFactory.php'; require_once 'PHPExcel\R ...

  7. oracle4

    分页查询 按雇员的id号升序取出 oracle的分页一共有三种方式 .根据rowid来分   ) ) order by cid desc; 执行时间0.03秒 .按分析函数来分   and rk> ...

  8. MYSQL参数学习---------------- 张碧池

    http://pottievil.com/category/mysql/mysql%E5%8F%82%E6%95%B0/

  9. spring core源码解读之ASM4用户手册翻译之一asm简介

    第一章:ASM介绍 1.1 ASM动机: 程序的分析,生成,转换技术可以应用到许多场景: 1.程序分析,从简单的语法解析到完整的语义分析,可以应用在程序中找到潜在的bug,发现无用的代码,工程代码的逆 ...

  10. 文件权限和目录权限详解(rwx)

    [文件] r:可读,可以使用cat命令查看文件内容: w:可写,可以编辑或删除文件: x:可执行,可以当作命令提交给内核 [目录] r:可以对此目录执行ls,列出内部所有文件 w:可以在此目录创建文件 ...