Bootstrap must-learn tab page (Tab) plug-in every day_javascript skills-JS Tutorial-php.cn

Bootstrap must-learn tab page (Tab) plug-in every day_javascript skills

WBOY

Release： 2016-05-16 15:03:58

Original

1816 people have browsed it

Tab You can easily create a tab interface by combining some data attributes.

"If you want to reference the plugin's functionality alone, then you need to reference tab.js. Alternatively, as mentioned in the Bootstrap Plugin Overview chapter, you can reference bootstrap.js or zip version of bootstrap.min.js "

1. Usage
You can enable tabs in two ways:

Via data attribute: You need to add data-toggle="tab" or data-toggle="pill" to the anchor text link.

Add the nav and nav-tabs classes to ul and the Bootstrap tag style will be applied. Add the nav and nav-pills classes to ul and the Bootstrap capsule style will be applied.

<ul class="nav nav-tabs">
  <li><a href="#identifier" data-toggle="tab">Home</a></li>
...
</ul>

Copy after login

Via JavaScript: You can use Javscript to enable tabs as follows:

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

Copy after login

The following examples demonstrate different ways to activate individual tabs:

// 通过名称选取标签页
$('#myTab a[href="#profile"]').tab('show')
 
// 选取第一个标签页
$('#myTab a:first').tab('show') 
 
// 选取最后一个标签页
$('#myTab a:last').tab('show') 
 
// 选取第三个标签页（从 0 开始索引）
$('#myTab li:eq(2) a').tab('show')

Copy after login

2. Fade in and fade out effect
If you need to set the fade effect for the tab page, please add .fade after each .tab-pane. The first tab must add the .in class in order to fade in and display the initial content, as shown in the example below:

<div class="tab-content">
 <div class="tab-pane fade in active" id="home">...</div>
 <div class="tab-pane fade" id="svn">...</div>
 <div class="tab-pane fade" id="ios">...</div>
 <div class="tab-pane fade" id="java">...</div>
</div>

Copy after login

3. Method
.$().tab: This method activates tab elements and content containers. The tab needs to use a data-target or an href pointing to the container node in the DOM.

<ul class="nav nav-tabs" id="myTab">
 <li class="active"><a href="#identifier" data-toggle="tab">Home</a></li>
 .....
</ul>
<div class="tab-content">
 <div class="tab-pane active" id="home">...</div>
 .....
</div>
<script>
 $(function () {
  $('#myTab a:last').tab('show')
 })
</script>

Copy after login

4. Events
The following table lists the events used in the Tab plug-in. These events can be used as hooks in functions.

5. Basic Examples
1． Tag page
The tab page is also commonly known as the tab function.

//基本用法
<ul class="nav nav-tabs">
  <li class="active">
    <a href="#html5"
    data-toggle="tab">HTML5</a>
  </li>
  <li>
    <a href="#bootstrap" data-toggle="tab">Bootstrap</a>
  </li>
  <li>
    <a href="#jquery" data-toggle="tab">jQuery</a>
  </li>
  <li>
    <a href="#extjs" data-toggle="tab">ExtJS</a>
  </li>
</ul>

<div class="tab-content" style="padding: 10px;">
  <div class="tab-pane active" id="html5">
    ...
  </div>
  <div class="tab-pane" id="bootstrap">
    ...
  </div>
  <div class="tab-pane" id="jquery">
    ...
  </div>
  <div class="tab-pane" id="extjs">
    ...
  </div>
</div>

Copy after login

//可以设置淡入淡出效果 fade，而 in 表示首选的内容默认显示

<div class="tab-pane fade in active" id="html5">
//也可以换成胶囊式

<ul class="nav nav-pills">
//data-target

Copy after login

Using data-target to bind or not has the same effect

//使用 JavaScript，直接使用 tab 方法。

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

Copy after login

//事件，其他雷同

$('#nav a').on('show.bs.tab', function() {
  alert('调用 tab 时触发！');
});

$('#nav a').on('shown.bs.tab', function() {
  alert('显示完 tab 时触发！');
});

Copy after login

For more content, please pay attention to the Bootstrap topic: Bootstrap learning tutorial

The above is the entire content of this article, I hope it will be helpful to everyone’s study.