Create a simple and scalable jQuery/CSS3 Tab menu

Today, we use jQuery and CSS3 to create a simple and scalable Tab menu. This Tab menu also has the slider effect during Switching. Let's take a look:

Compared with the Tab menu, you can also use CSS code to customize the appearance you need.

After reading the demo, I will explain the source code of this Tab menu, which consists of CSS code and jQuery code.

First, the simple HTML code:

      Tab 1    Tab 2              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias molestiae atque quis blanditiis eaque maiores ducimus optio neque debitis quos dolorum odit unde quibusdam tenetur quaerat magni eius quod tempore.                      Lorem ipsum dolor sit amet.        Minima mollitia tenetur nesciunt modi?        Id sint fugit et sapiente.        Nam deleniti libero obcaecati pariatur.        Nemo optio iste labore similique?            

Here we can see that the menu part of the Tab menu uses a ul li list, and the content part is a common div block.

Next let's take a look at the CSS code:

{:;:;:;}{:;}{:;:;:;:;:;:;:;:;:;:;:;:;:;:;}{:;}{:;:;:;:;:;:;}{:;:;:;:;}{:;:;:;:;}{:;:;  }{:;:;:;}{:;}{:;}{:;:;:;}{:;}

Here we can clearly see that most CSS code is very common, that is, it defines the appearance of the Tab menu. The slider slide in and out uses CSS3.

Then there is the switching action. Here jQuery code is used, which is also very simple:

 TabBlock =200'.tabBlock-tabs').on('click', '.tabBlock-tab',  $tabBlocks = $('.tabBlock'== $tabBlock.find('.tabBlock-pane'= $tabBlock.find('.tabBlock-tab.is-active' $context = $tab.closest('.tabBlock' (!$tab.hasClass('is-active''is-active''is-active' $panes = $context.find('.tabBlock-pane'

It is clear that several js functions mainly initialize init () and tab to switch switchTab (). Using jQuery to achieve switching is actually implemented using jQuery's css class that dynamically changes elements, nothing special, so js and css are separated. We only need to modify the css code to customize our favorite appearance.

Finally, share the source code,>