switch content easy tabs - Free Download Switch Between Content Sections With jQuery Easy-Tabs Plugin

Free Download Switch Between Content Sections With jQuery Easy-Tabs Plugin

By Posted on

This time I will share jQuery Plugin and tutorial about Switch Between Content Sections With jQuery Easy-Tabs Plugin, hope it will help you in programming stack.

switch content easy tabs - Free Download Switch Between Content Sections With jQuery Easy-Tabs Plugin
File Size: 9.59 KB
Views Total: 674
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

A tiny yet fully customizable tabs system built with jQuery that enables the user to switch between sectioned (tabbed) content by clicking on the associated tabs.

How to use it:

1. The required HTML structure for the tabs & tabbed content.

view source
01 <div id="example" class="zeus-tab" onchage="handleTabClick">
02   <ul class="zeus-tab-title">
03     <li class="tab-current">Tab 1</li>
04     <li>Tab 2</li>
05     <li>Tab 3</li>
06   </ul>
07   <div class="zeus-tab-content">
08     <div class="zeus-tab-item tab-show">
09       Tab 1 Content
10     </div>
11     <div class="zeus-tab-item tab-show">
12       Tab 2 Content
13     </div>
14     <div class="zeus-tab-item tab-show">
15       Tab 3 Content
16     </div>
17   </div>
18 </div>

2. The required CSS styles for the tabs system. Copy and paste the following CSS rules into your document.

view source
01 .zeus-tab {
02   margin: 10px 0;
03 }
04  
05 .zeus-tab > .zeus-tab-title {
06   padding: 0;
07   position: relative;
08   left: 0;
09   height: 40px;
10   white-space: nowrap;
11   font-size: 0;
12 }
13  
14 .zeus-tab-title > li {
15   display: inline-block;
16   vertical-align: middle;
17   font-size: 14px;
18   position: relative;
19   line-height: 40px;
20   min-width: 65px;
21   padding: 0 15px;
22   text-align: center;
23   cursor: pointer;
24   list-style: none;
25 }
26  
27 .zeus-tab-title .tab-current {
28   color: #000;
29 }
30  
31 .zeus-tab-content {
32   padding: 10px;
33 }
34  
35 .zeus-tab-content > .zeus-tab-item {
36   display: none;
37 }
38  
39 .zeus-tab-content .tab-show {
40   display: block !important;
41 }
42  
43 .zeus-tab .zeus-tab-title {
44   border-bottom: 1px solid #E6E6E6;
45 }
46  
47 .zeus-tab > .zeus-tab-title .tab-current {
48   border-width: 1px;
49   border-style: solid;
50   border-color: #E6E6E6;
51   border-bottom-color: #FFFFFF;
52   border-radius: 2px 2px 0 0;
53   pointer-events: none;
54   background-color: #FFFFFF;
55 }

3. Or directly load the tab.css in the document. This stylesheet also provides 2 beautiful themes for your design needs:

  • brief: Add the zeus-tab-brief class to the top container.
  • card: Add the zeus-tab-card class to the top container.
view source
1 <link rel="stylesheet" href="css/tab.css" />

4. Load the main JavaScript file tabs.js after jQuery. That’s it.

view source
1 <script src="/path/to/jquery.slim.min.js"></script>
2 <script src="js/tab.js"></script>

5. Handle the click event on the tabs.

view source
1 function handleTab1Click(li, index) {
2   console.log('I Just Clicked Tab '+ index);
3 }

Changelog:

2019-12-01

This awesome jQuery plugin is developed by kevin-zeus. For more Advanced Usages, please check the demo page or visit the official website.

source : jquery.net

Related posts: