Beautification and refinement of tabs controls in bootstrap (recommended) _javascript tips

The tabs controls in bootstrap are popular with developers for their simplicity and ease of use. However, its style is relatively single, how to make a more beautiful effect on its original basis, I have been considering this issue. In addition, the tabs in bootstrap have to click each tab to switch, can you use jquery to control its automatic switching, allowing it to switch from one tab to another over a period of time (such as 5 seconds)? Here is my implementation process, first of all, the tabs part of the HTML code:

<div class= "tab" role= "TabPanel" >
<!--Nav tabs--> <ul class=
"Nav nav-tabs" role= "Tablist" Style= "margin-top:0px" id= "Doctabs" > <li role= "Presentation" class= "
Active" ><a href= "#Section_new "
aria-controls=" Home "role=" tab "data-toggle=" tab "> Latest </a>
<li role=" Presentation "><a href= "#Section_week"
aria-controls= "Profile" role= "tab" data-toggle= "tab" >7 days hot </a>
<li role= " Presentation "><a href=" #Section_month "aria-controls= Messages" role= "tab"
data-toggle= "tab" >30 Day Hot </a>
</ul>
<!--Tab panes-->
<div class= "tab-content" >
<div role= " TabPanel "class=" Tab-pane Fade in Active "id=" section_new ">
<p>

What's in the TAB1

</p>
</div>
<div role= "TabPanel" class= "Tab-pane Fade" id= "Section_week" >
<p>

What's in the TAB2

</p>
</div>
<div role= "TabPanel" class= "Tab-pane Fade" id= "Section_month" >
<p>

What's in the TAB3

</p>
</div>
</div>
</div>

The code is basically the same as the native code in bootstrap, without making too big a change and filling in your own data.

Below to set the style of tabs, these styles will override the bootstrap in the original style to beautify the tabs effect

<style type= "text/css" > tab. nav-tabs {border-bottom:0 none; background: #eaeaea; tab. Nav-tabs Li a {backgr
Ound:transparent;
border-radius:0;
font-size:16px;
Border:none;
Color: #333;
PADDING:12PX 22px; }. tab. nav-tabs li.active A,. tab. nav-tabs li.active a I {border:0 none; background: #e67e22; color: #fff;}. tab. nav-
Tabs li.active a:after {content: "";
Position:absolute;
left:45%;
Bottom: -14px;
BORDER:7PX solid Transparent;
BORDER-TOP:7PX solid #e67e22; }. tab. tab-content {padding:5px; color: #5a5c5d; font-size:14px; line-height:20px; margin-top:5px; border-bottom:1p
x solid #e67e22; 
@media only screen and (max-width:480px) {. tab. nav-tabs,. tab. nav-tabs li {width:100%; background:transparent;}  . tab. Nav-tabs li.active a {border-radius:10px 10px 0 0}. tab. nav-tabs li:first-child a {border-bottom-left-radius:
0; }. tab. nav-tabs Li a {margin-bottom:10px border:1px solid lightgray.}. nav-tabs li.active a:after {Border:non E; }} </style>

The effect comes out this way:

is not better than the original style of bootstrap (but the different strokes of Chinese cabbage, here is to introduce the implementation process, of course, by modifying the CSS you can also make other styles)

Below see how to achieve Tabs automatic switching, not much to say, directly on the code:

Tabs Automatic rotation
function timer (i)
{
interval=setinterval (function ()
{
$ ("#docTabs li:eq (" +i+) a ") . tab (' Show ');
i++;
if (i>2)
i=0;
}
, 5000);
return interval;
}
$ (function () {
var i=0;
Interval=timer (i);
Suspends the rotation of $ (". Tab-pane") when the mouse hovers over the list area
. mouseover (function () {
clearinterval (interval);
});
Continue to rotate
$ (". Tab-pane") when the mouse moves away. Mouseout (function () {
timer (i);
}
);

The above is a small series for you to introduce the tabs control in the bootstrap and improve (recommended), I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!