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:
|
<<: Detailed explanation of MySQL stored procedures, cursors, and transaction examples
>>: Detailed explanation of the solution to permission denied in Linux
After configuring VIP, the error message that app...
Design the web page shown above: <!DOCTYPE htm...
Preface Recently, a Java EE web project that has ...
After nginx is compiled and installed and used fo...
Table of contents origin Environmental Informatio...
If you think the system is slow and want to chang...
1. Windows Server 2019 Installation Install Windo...
1. Python automatically runs at startup Suppose t...
If you want to adjust the size and number of Inno...
0x0 Parameter verification Most of the parameter ...
Method 1: float:right In addition, floating will ...
Table of contents What is Docker Client-side Dock...
<br />User experience is increasingly valued...
Solve the problem that the responseText returned ...
In addition to setting regulations for various ta...