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

Steps for restoring a single MySQL table

When I was taking a break, a phone call completel...

Using JS to implement a simple calculator

Use JS to complete a simple calculator for your r...

How to install JDK 13 in Linux environment using compressed package

What is JDK? Well, if you don't know this que...

Detailed explanation of invisible indexes in MySQL 8.0

Word MySQL 8.0 has been released for four years s...

How to deploy Go web applications using Docker

Table of contents Why do we need Docker? Docker d...

Summary of Linux file directory management commands

touch Command It has two functions: one is to upd...

Introduction to the use of CSS3 filter attribute

1. Introduction When writing animation effects fo...

Detailed explanation of MySQL replication principles and practical applications

This article uses examples to illustrate the prin...

In-depth analysis of MySQL index data structure

Table of contents Overview Index data structure B...

Detailed explanation of long transaction examples in MySQL

Preface: The "Getting Started with MySQL&quo...

MySQL server 5.7.20 installation and configuration method graphic tutorial

This article records the installation and configu...

Vue template configuration and webstorm code format specification settings

Table of contents 1. Compiler code format specifi...

Detailed explanation of the simple use of MySQL query cache

Table of contents 1. Implementation process of qu...

Solution to MySQL startup successfully but not listening to the port

Problem Description MySQL is started successfully...

CSS sample code with search navigation bar

This article shows you how to use CSS to create a...