最近遇到一个问题,是关于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. C++——cout输出小数点后指定位数

    转载自 http://blog.csdn.net/edricbjtu/article/details/41082597

  2. PAT 1070. Mooncake (25)

    Mooncake is a Chinese bakery product traditionally eaten during the Mid-Autumn Festival.  Many types ...

  3. 【转】国内较快的maven镜像

    国内连接maven官方的仓库更新依赖库,网速一般很慢,收集一些国内快速的maven仓库镜像以备用. ====================国内OSChina提供的镜像,非常不错=========== ...

  4. jquerymobile知识点:动态ListView

    这里要讲的是jqueryMobile 中的ListView 动态的列表 <ul data-role="listview" data-inset="true" ...

  5. [R] Draw a wordcloud

    # 加载rJava.Rwordseg库 library(rJava); library(Rwordseg); library(RColorBrewer); # == 读入数据 lecture=read ...

  6. LPC2378-Jlink 能下载程序,但是调试出现各种奇怪问题

    LPC2378-Jlink调试经验 1.Jlink(d版的没有关系)不能下载程序?     把下载速率设置到500Khz及以下的速率. 2.Jlink能在500Khz的速率下载程序,但是不能调试?添加 ...

  7. HDU2019JAVA

    数列有序! Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submissi ...

  8. 解析嵌套json字符串,一个json字符串中嵌套另一个json字符串

    我现在有一个字符串是这样: { "msg": { ", "attrName": "sensorData", "trans ...

  9. JQuery判断子Iframe 加载完成的技术解决

    当需要我们给当前页面动态创建Iframe子框架的时候,并且同时需要操作子Iframe里的方法的时候,我们发现无法成功实现.这是为什么呢?经小程总结,发现子Iframe还没有来的及加载完成,就去执行里面 ...

  10. A题笔记(6)

    No. 3040 代码量好少,主要考到数学知识 唯一需要注意的是变量的类型 int -2147483648 ~ +2147483647 (4 Bytes) long 在32位机器中 int 类型 和 ...