19th rounds of Bootstrap3.0 Learning (JavaScript plug-in -- tab)

Before reading, you can also go to the Bootstrap3.0 getting started learning series navigation to view the http://www.cnblogs.com/aehyok/p/3404867.html

This article mainly describes the JavaScript plug-in tab.

I have learned this through components.

<ul =>  <li =><a href=>Home</a></li>  <li><a href=>Profile</a></li>  <li><a href=>Messages</a></li></ul>

Of course, this is the effect, but the first tag Home is activated by default and cannot be clicked.

Now let's optimize it.

We predefine some href tag IDs for the above

     <ul =>      <li><a href= >Home</a></li>      <li><a href= >Profile</a></li>      <li><a href= >Messages</a></li>      <li><a href= >Settings</a></li>      <li =>          <a href= data-toggle= =>Test<b =></b></a>          <ul =>            <li ><a href=>@tag</a></li>            <li ><a href=>@mag</a></li>        </ul>      </li>      </ul>

A drop-down menu is added.

Then we continue to revise the Code

    <ul =>      <li><a href= data-toggle=>Home</a></li>      <li><a href= data-toggle=>Profile</a></li>      <li><a href= data-toggle=>Messages</a></li>      <li><a href= data-toggle=>Settings</a></li>      <li =>          <a href= data-toggle= =>Test<b =></b></a>          <ul =>            <li ><a data-toggle= href=>@tag</a></li>            <li ><a data-toggle= href=>@mag</a></li>        </ul>      </li>      </ul>        <div =>      <div = id=>..Raw denim you probably haven      <div = id=>..Raw denim you probably haven      <div = id=>..Raw denim you probably haven      <div = id=>..Raw denim you probably haven    <div = id=>A..Raw denim you probably haven    <div = id=>B..Raw denim you probably haven    </div>    </div>

Add a property data-toggle = "tab" to tag a on the tab"

Add a div container below and give the style class of tab-content.

Define the div in the container, add the id attribute on the div, correspond to the tag ID of the preceding href, and add the style class of tab-pane, one of which is as follows, of course, an active style class is added to this class to activate it by default.

<div = id=>

 

Now, you can click on each tab, and click the drop-down menu, which corresponds to the tab content page defined in tab-content.

We can see that the above operations can achieve tag switching and content display through the data attribute.

Next we will implement it through JavaScript.

Usage

You can use JavaScript to start and switch tabs (each tab is activated separately ):

$().tab(

Paste all codes

Content => <! -- Bootstrap --> <link href = rel = media => <! -- [Lt IE]> <script src => </script> <! [Endif] --> The data-toggle attribute in the previous Code a label is removed, so that the following tab content cannot be found, so the content cannot be switched.

However, we can click to switch through the JavaScript above.

You can activate tabs in the following ways:

$().tab().tab().tab().tab() 

You only need to add corresponding events for calling.

Simply add page elementsdata-toggle="tab"Ordata-toggle="pill"You can activate tabs or capsule navigation without writing any JavaScript code. IsulAdd.navAnd.nav-tabsYou can assign the Bootstrap tab style to the classe.navAndnav-pillsClass can assign the capsule tab to it.

You can use jQuery to perform the first loading.

<script>).tab(</script>

Event

$().on(  e.relatedTarget })

The learning of tabs is basically implemented by simple functions. Although it has been studied for a long time, it is still done.

This article has been updated to the Bootstrap3.0 getting started learning series navigation http://www.cnblogs.com/aehyok/p/3404867.html