JavaScript custom plug-in to implement tab switching function

JavaScript custom plug-in to implement tab switching function

This article shares the specific code of JavaScript to implement the tabs switching function for your reference. The specific content is as follows

Custom plug-in to implement tabs switching function

Here is the HTML code:

<script src="jquery-3.1.0.js"></script>
    <script src="plugs/demo01.js"></script>
    <style>
        #tabs>div{
            height: 200px;
            width: 200px;
            background-color: pink;
            display: none;
        }
        #tabs div.div-active{
            display: block;
        }
        .btn-active{
            background-color: orange;
        }
</style>

Here is the js code:

(function ($) {
 //tabs plugin $.fn.tabs = function (options) {
        let defaults = {
            activeIndex:1,
            titleActive:"btn-active",
            contentActive:"div-active",
            attr:"rel"
        }
        /*Merge parameters*/
        $.extend(defaults,options);
        /*Get all buttons*/
        let btns = this.find("["+defaults.attr+"]");
        /*Get the value in rel*/
        let rels = [];
        btns.each(function (index,element) {
            rels.push($(element).attr(defaults.attr));
        });
        /*Get all divs*/
        let divs = this.find(rels.toString());
        /* Check if the specified subscript is out of bounds*/
        if (defaults.activeIndex > btns.length-1) {
            defaults.activeIndex = 0;
        }
        /*Set the default display content*/
        btns.eq(defaults.activeIndex).addClass(defaults.titleActive);
        divs.eq(defaults.activeIndex).addClass(defaults.contentActive);
        /*Bind click event to the button*/
        btns.click(function () {
            $(this).addClass(defaults.titleActive)
                .siblings().removeClass(defaults.titleActive);
            divs.eq($(this).index()).addClass(defaults.contentActive)
                .siblings().removeClass(defaults.contentActive);
        });
    }
})(jQuery);

Final code screenshot

1. Default

2. Click to switch:

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • Vue.js component tabs to achieve tab switching effect
  • Use AngularJS instructions to achieve tabs switching effect
  • JavaScript to achieve tabs switching effect (extended version)
  • JavaScript realizes the tab switching effect (self-written native js)
  • Four ways to implement tab switching in javascript
  • A streamlined JS DIV layer tab switching code
  • js (JavaScript) to achieve a simple example of TAB tag switching effect
  • JS+CSS to achieve sliding switching tab menu effect
  • Native js to achieve tab switching
  • A js tab switching effect code [code separation]

<<:  Detailed explanation of MySQL stored procedures, cursors, and transaction examples

>>:  Detailed explanation of the solution to permission denied in Linux

Recommend

Solution to the problem of mysql master-slave switch canal

After configuring VIP, the error message that app...

HTML user registration page settings source code

Design the web page shown above: <!DOCTYPE htm...

A bug fix for Tomcat's automatic shutdown

Preface Recently, a Java EE web project that has ...

How to smoothly upgrade nginx after compiling and installing nginx

After nginx is compiled and installed and used fo...

A time-consuming troubleshooting process record of a docker error

Table of contents origin Environmental Informatio...

Centos 7 64-bit desktop version installation graphic tutorial

If you think the system is slow and want to chang...

How to set up Windows Server 2019 (with pictures and text)

1. Windows Server 2019 Installation Install Windo...

Detailed steps for Python script self-start and scheduled start under Linux

1. Python automatically runs at startup Suppose t...

InnoDB engine redo file maintenance method

If you want to adjust the size and number of Inno...

Right align multiple elements in the same row under div in css

Method 1: float:right In addition, floating will ...

How to build and deploy Node project with Docker

Table of contents What is Docker Client-side Dock...

Chinese website user experience rankings

<br />User experience is increasingly valued...

Ajax responseText parses json data case study

Solve the problem that the responseText returned ...

How to pass W3C validation?

In addition to setting regulations for various ta...