bootstrap 下 标签页跳转总结

时间:2021-09-14 02:42:00

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

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

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. &period;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 -- 插件&colon; 模态框、滚动监听、标签页

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

随机推荐

  1. PhoneGap配置笔记

    关于PhoneGap简介: PhoneGap是一个用基于HTML,CSS和JavaScript的,创建移动跨平台移动应用程序的快速开发平台.它使开发者能够利用iPhone,Android,Palm,S ...

  2. 关于UIScollView 中的contentOffset 的理解

    大家对UIScollView 中的contentOffset 一直有疑问, 虽然看是一个简单的问题, 实际上并不简单. 当时我也有好多疑问, 后来在网上找了一下资料, 发现没有找到合理的解释, 因此自 ...

  3. MyBatis&lpar;3&period;2&period;3&rpar; - Cache

    Caching data that is loaded from the database is a common requirement for many applications to impro ...

  4. vmware mac虚拟机 停在启动界面

    前言: 关于vmware安装mac 10.8 可以从参看:http://www.cnblogs.com/zyf2013/p/3888242.html 安装完成以后重新启动,卡在了白苹果启动画面处. 或 ...

  5. 动画讲解 Eclipse 常用快捷键

    Eclipse有强大的编辑功能, 工欲善其事,必先利其器, 掌握Eclipse快捷键,可以大大提高工作效率. 小坦克我花了一整天时间, 精选了一些常用的快捷键操作,并且精心录制了动画, 让你一看就会. ...

  6. 自己封装的C&num;操作redis公共类

    关于C#操作redis公共类,网上有很多版本,每个版本我都看了,发觉还是不够完美,都存在一个问题,只能操作单一的缓存数据库 redis指令支持上,这里可以自己去扩展,下面分享下我近期封装的一个redi ...

  7. Python&&num;160&semi;关于Python函数参数传递方式的一点探索

    关于Python函数参数传递方式的一点探索 by:授客 QQ:1033553122 实践代码 #!/usr/bin/env python # -*- coding:utf-8 -*- __author ...

  8. 2016-2017-2 20155312 实验四Android程序设计实验报告

    遇到的问题及解决过程 「问题1」Android Studio-R文件出错 解决:参考Android Studio-R文件错误的解决办法步骤如下: 第一步:检查xml文件,R文件错误通常是由于我们的xm ...

  9. linux&lowbar;开启mysql服务

    想要连接mysql的时候必须先开启mysql的服务 service mysqld start mysql -u root -p 输入密码

  10. 【Android】7&period;1 布局控件常用的公共属性

    分类:C#.Android.VS2015: 创建日期:2016-02-10 一.简介 Android应用程序中的布局控件都是容器控件,用于控制子元素的排列和放置方式.Android提供的布局控件有: ...