最近遇到一个问题,是关于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. hdoj 2647 N!Again

    N!Again Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Sub ...

  2. web前后台数据交互的四种方式(转)

    1.利用cookie对象  Cookie是服务器保存在客户端中的一小段数据信息.使用Cookie有一个前提,就是客户端浏览器允许使用Cookie并对此做出相应的设置.一般不赞成使用Cookie. (1 ...

  3. php 环境变量收集

    常用的PHP环境变量和系统常量列表 是一个包含服务器端相关信息的PHP全局环境变量,在PHP4.1.0之前的版本使用$HTTP_SERVER_VARS.更多信息可以参考这里. $_SERVER['PH ...

  4. PHP环境配置综合篇

    1.WNMP: http://www.wnmp.com.cn/     En: https://www.getwnmp.org/ 2.xampp:https://www.apachefriends.o ...

  5. Pgsql数据库jsonb操作函数集合

    CREATE OR REPLACE FUNCTION "json_object_del_path"( "json" json, "key_path&q ...

  6. tomcat报错:This is very likely to create a memory leak问题解决

    tomcat memory leak解决方案 这种问题在开发中经常会碰到的,看看前辈的总结经验 Tomcat内存溢出的原因  在生产环境中tomcat内存设置不好很容易出现内存溢出.造成内存溢出是不一 ...

  7. Android框架之网络开发框架Volley

    1. Volley简单介绍 我们平时在开发Android应用的时候不可避免地都须要用到网络技术.而多数情况下应用程序都会使用HTTP协议来发送和接收网络数据.Android系统中主要提供了两种方式来进 ...

  8. Makefile 入门与基本语法 分类: C/C++ ubuntu 2015-05-18 11:16 466人阅读 评论(0) 收藏

    在我看来,学会写简单的Makefile,阅读较复杂的makefile,是每一个Linux程序员都必须拥有的基本素质.Makefile可以自动识别哪些源文件被更改过,需要重新编译,那些不需要.从而节省大 ...

  9. 用apache的httpclient发请求和接受数据

    此处发请求的是用httpclient4,请自己下载所需要的jar包. 发post请求,并得到数据. String url = "http://localhost:8080/lee" ...

  10. android 66 sharedperference的使用

    package com.itheima.qqlogin; import java.io.BufferedReader; import java.io.File; import java.io.File ...