Last Updated:

Universal tab menu with tabs.

On the Internet, you can find a lot of scripts for managing menus on tabs, written both in pure JavaScript and in jQuery or using its plugins. Unfortunately, most of them have a big enough disadvantage, which is that they do not have much flexibility and versatility. Adding new tabs and their corresponding blocks requires special attention so as not to get confused by different identifiers, especially if the page has several such tab menus.idhref

In this article, we will take a closer look at a small universal tab menu control script written in vanilla JavaScript, which is devoid of the disadvantages listed above:

first, the absence of any identifiers;
secondly, a flexible relationship between the tab (tab) and the corresponding content block, based on navigation through DOM elements;
Thirdly, you can create as many such menus as you like with any number of tabs (of course, everything is within reason).

HTML-markup of menus with tabs.

The following is html markup for a menu that uses tabs. The menu is based on an unlabeled list , and the controls will be . Using as an interactive element eliminates another fairly common mistake - the use of a tag (link) for these purposes.<ul><li><li><a>

Remember, this is very important.
Both from the point of view of semantics and from the point of view of SEO – the tag should be used only to form links leading to other pages of the site or other Internet resource. To control the elements of the current page (show/hide, change style, move, load, etc.), the elements of , , , . It is on them that the event handlers are hung. <a><span><button><div><li>

As mentioned earlier, there are no element identifiers in the layout. If necessary, you can easily add a few more tabs and blocks that they will open. You can even add another tab menu and you don't have to worry about the uniqueness of the IDs that provide a link between the tab and its corresponding block.<li><div>

A style sheet for tabb menus.

Only styles that relate directly to the tabbed shift are presented:

Very important.
To reduce the size of the style sheet, I will not list properties with vendor prefixes that provide cross-browser compatibility. Do not forget to prescribe them when implementing your projects.

If there is a need to create another menu with tabs on this page, then it is enough to duplicate the HTML markup of the first menu, changing, of course, the content of the blocks. If necessary, you can change the appearance of the new tab menu by adding a class to it. .tabsmenu2

Let's add styles for this class to the CSS:

Write JavaScript to control the tab menu.

To limit the scope, let's place the script in an anonymous self-starting function so that there are no conflicts with other JS scripts connected to the page.

When writing a JS script, we will use the Class construct. This allows you to create multiple instances of tabbed menus on the same page.

Create instances of tab menus.

First of all, let's create a collection of objects of all tab menus that are located on the page. If there is no menu on the page, then make . This is necessary to exclude errors and block other JS scripts that may be connected to this page. Next, use the method to iterate through the resulting collection, while creating instances of the current tabbed menu using the constructor of the .returnfor...ofTabsmenu

We will write all further JS code inside the .class Tabsmenu { ... }

First of all, consider the constructor of the . The constructor initializes a number of objects and variables that contain information about the tab menu instance. In addition, an event handler is registered in the constructor, which will be triggered when you click on the parent tab menu item. As an argument, the constructor takes the tab menu object that is currently being instantiated.Tabsmenu

Switch menu tabs.

When the event handler fires, the . The algorithm of this function is not complicated:swithTab

  1. make sure that the click is made on the element that forms the tab;<li>
  2. determine the index of the tab on which the click was made;
  3. iterate through all the tab menu instances and remove the active class;
  4. using the resulting index, make the tab on which the click was active;
  5. call the function of switching blocks with content, passing it as a parameter the index of the active tab.switchBloks

Function code and comments to it:swithTab

Switch blocks with content.

Now let's take a closer look at the . The purpose of this feature is to enable a container that corresponds to the active taboo and disable all other containers. The function code is very simple and does not need additional explanation:switchBlock


As you can see from the article, the layout of the tab menu and the script that controls its work are quite simple. If necessary, this menu is easily expanded. You can add new tabs and containers with content, as well as a new tab menu as a whole.