For the beautification and improvement of the tabs control in BootStrap (recommended), bootstraptabs

For the beautification and improvement of the tabs control in BootStrap (recommended), bootstraptabs

The tabs control in BootStrap is very popular with developers for its ease of use. However, I have been thinking about how to make more beautiful effects based on its original style. In addition, you must click each tab in Bootstrap to switch the tabs. Can you use Jquery to control its automatic switch so that it can switch from one tab to another over a period of time (for example, 5 seconds? The following is my implementation process. The first part is the tabs html code:

<Div class = "tab" role = "tabpanel"> <! -- Nav tabs --> <ul class = "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-day popular </a> <li role =" presentation "> <a href =" # Section_month "aria-controls =" messages "role = "tab" Data-toggle = "tab"> top 30 days </a> </ul> <! -- Tab panes --> <div class = "tab-content"> <div role = "tabpanel" class = "tab-pane fade in active" id = "Section_new"> <p>

Content in tab1

</p></div><div role="tabpanel" class="tab-pane fade" id="Section_week"><p>

Content in tab2

</p></div><div role="tabpanel" class="tab-pane fade" id="Section_month"><p>

Content in tab3

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

These codes are basically the same as the native code in bootstrap. You don't need to make too many changes. Just enter your own data.

Set the tabs style below, which will overwrite the original style in bootstrap to beautify tabs.

<style type="text/css">.tab .nav-tabs {border-bottom: 0 none;background: #eaeaea;}.tab .nav-tabs li a {background: 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: 1px 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;}.tab .nav-tabs li.active a:after {border: none;}}</style>

The results are as follows:

Is it better than the original bootstrap style? (however, radish cabbage has its own love. Here we only introduce the implementation process. Of course, you can also make other styles by modifying css)

Let's take a look at how to achieve automatic switch of tabs. If you don't talk about it, go directly to the Code:

// Tabs automatic rotation function timer (I) {interval = setInterval (function () {$ ("# docTabs li: eq (" + I + ") "). tab ('show'); I ++; if (I> 2) I = 0 ;}, 5000); return interval ;}$ (function () {var I = 0; interval = timer (I); // pause rotation when hovering over the list area $ (". tab-pane "). mouseover (function () {clearInterval (interval) ;}); // rotate continuously when the mouse is removed $ (". tab-pane "). mouseout (function () {timer (I );});});

The above section describes how to beautify and improve the tabs control (recommended) in BootStrap. I hope it will help you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!