The tabs control in BootStrap is very popular among developers for its simplicity and ease of use. However, its style is relatively single, how can it achieve a more beautiful effect based on its original form? I have been considering this issue. In addition, tabs in Bootstrap must click each tab to achieve switching. Can you use Jquery to control its automatic switching and let it switch from one tab to another after a period of time (such as 5 seconds)? The following is my implementation process, first of all, the html code of the tabs part:
<div role="tabpanel"><!-- Nav tabs --><ul role="tablist" style="margin-top:0px;" id="docTabs"><li role="presentation"><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"> Popular in 7 days</a><li role="presentation"><a href="#Section_month"aria-controls="messages" role="tab" data-toggle="tab">Popular in 30 days</a></ul><!-- Tab panes --><div><div role="tabpanel" id="Section_new"><p>
Contents in tab1
</p></div><div role="tabpanel" id="Section_week"><p>
Contents in tab2
</p></div><div role="tabpanel" 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 fill in your own data.
Let's set the tabs styles. These styles will overwrite the original styles in bootstrap to achieve the effect of beautifying tabs.
<style type="text/css">.tab .nav-tabs {border-bottom: 0 none;background: #eaeaea;}.tab .nav-tabs li a {border: 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 ai {border: 0 none;background:#e67e22;color: #fff;}.tab .nav-tabs .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>After the effect comes out, it looks like this:
Is it better than the original style of bootstrap (but everyone has their own preferences. Here is just an introduction to the implementation process. Of course, you can also make other styles by modifying css)
Let’s take a look at how to implement automatic switching of tabs. Without further ado, just enter 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);//Pause rotation when the mouse hovers in the list area.mouseover(function(){clearInterval(interval);});//Continue rotation $(".tab-pane").mouseout(function(){timer(i);});});The above is the beautification and improvement of the tabs control in BootStrap introduced to you by the editor (recommended). I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!