python测试开发django-153.bootstrap导航-标签页切换(nav-tabs)

前言

Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。标签页.nav-tabs 类依赖 .nav 基类。

tab标签页

在标签 ul 添加 nav 和 nav-tabs 属性,将应用Bootstrap标签样式。
在li 里面 a 标签上简单的指定 data-toggle=“tab” 或 data-toggle=“pill”，就可以完成一个标签导航页

      
配置
      
操作
      
设置
    

页面效果

可以给第一个li设置一个class属性active来激活第一个标签页

      
配置
      
操作
      
设置
    

标签面板区

面板区容器要求带"tab-content"类名，下面的每个面板都要求带"tab-pane"类名
通过id="config"属性关联到导航页上的a标签href="#config"
默认设置第一页激活(active)

    

      
配置
      
操作
      
设置
    
    
    

        

            
配置页面
        
        

            
操作页面
        
        

            
设置页面
        
    

页面效果

点击其它标签可以切换

通过 JavaScript

通过JavaScript启用可切换标签 (每个标签都需要单独激活):

$('#tabs a').click(function (e) {
  e.preventDefault();
  $(this).tab('show');
})

多种激活方式

$('#tabs a[href="#config"]').tab('show'); // 通过名字选择
$('#tabs a:first').tab('show'); // 选择第一个标签
$('#tabs a:last').tab('show'); // 择最后一个标签
$('#tabs li:eq(2) a').tab('show'); // 选择第三个标签

使用示例

如果使用javascript实现这种导航内容的切换，a标签中无须再添加data-toggle='tab’或data-toggle=“pill”，如果每个a链接都使用了此属性，那就用不到javascript了。

淡入淡出效果fade

要使选项卡淡入，请添加.fade到每个.tab-pane. 第一个选项卡窗格还必须.in使初始内容可见。

        

            
配置页面
        
        

            
操作页面
        
        

            
设置页面
        
    

其它方法和活动参考https://v3.bootcss.com/javascript/#tabs