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
When I was taking a break, a phone call completel...
Use JS to complete a simple calculator for your r...
What is JDK? Well, if you don't know this que...
Word MySQL 8.0 has been released for four years s...
Table of contents Why do we need Docker? Docker d...
touch Command It has two functions: one is to upd...
1. Introduction When writing animation effects fo...
This article uses examples to illustrate the prin...
Table of contents Overview Index data structure B...
Preface: The "Getting Started with MySQL&quo...
This article records the installation and configu...
Table of contents 1. Compiler code format specifi...
Table of contents 1. Implementation process of qu...
Problem Description MySQL is started successfully...
This article shows you how to use CSS to create a...