


Learn object-oriented javascript and explain the object-oriented tab with examples_javascript skills
The example in this article explains the simplest object-oriented tab implementation method and shares it with everyone for your reference. The specific content is as follows
Rendering:
1. Function description
Click the three buttons to display the corresponding tabs
2. HTML code description
<div class="box" id="box"> <ul class="list"> <li class="in_active">第一张选项卡</li> <li class="in">第二张选项卡</li> <li class="in">第三张选项卡</li> </ul> <nav class="conList"> <a class="con_active" href="javascript:;">第一个控制按钮</a> <a class="con" href="javascript:;">第二个控制按钮</a> <a class="con" href="javascript:;">第三个控制按钮</a> </nav> </div>
3. Description of key css codes
/*in为选项卡普通状态,默认不显示*/ .in,.in_active{ display: none; width: 600px; height: 100px; background: orange; font-size: 50px; line-height: 100px; text-align: center; } /*in_active为选项卡选中状态,选中后显示*/ .in_active{ display: block; } /*con为按钮普通状态,默认文字颜色为黑色*/ .con,.con_active{ color: black; background-color: orange; } /*con_active为按钮选中状态,选中后文字颜色为白色*/ .con_active{ color: white; }
4. js code description
function Tab(obj){ /*元素获取*/ //获取选项卡展示部分 this.oList = obj.getElementsByTagName('ul')[0]; this.aIn = this.oList.getElementsByTagName('li'); //获取选项卡控制部分 this.oConList = obj.getElementsByTagName('nav')[0]; this.aCon = this.oConList.getElementsByTagName('a'); /*变量设置*/ //选项卡张数 this.count = this.aIn.length; //当前第几张 this.cur = 0; var _this = this; for(var i = 0; i < this.count; i++){ //设置索引 this.aCon[i].index = i; //给按钮添加事件 this.aCon[i].onclick = function(){ _this.cur = this.index; _this.switch(); } } } Tab.prototype.switch = function(){ //去掉所有 for(var i = 0; i < this.count; i++){ this.aIn[i].className = 'in'; this.aCon[i].className = 'con'; } //显示当前 this.aIn[this.cur].className = 'in_active'; this.aCon[this.cur].className = 'con_active'; } //获取选项卡元素 var oBox = document.getElementById('box'); //构造选项卡对象 var tab1 = new Tab(oBox);
I hope this article will be helpful for everyone to learn JavaScript object-oriented.

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest

Go language supports object-oriented programming through type definition and method association. It does not support traditional inheritance, but is implemented through composition. Interfaces provide consistency between types and allow abstract methods to be defined. Practical cases show how to use OOP to manage customer information, including creating, obtaining, updating and deleting customer operations.

OOP best practices in PHP include naming conventions, interfaces and abstract classes, inheritance and polymorphism, and dependency injection. Practical cases include: using warehouse mode to manage data and using strategy mode to implement sorting.

There is no concept of a class in the traditional sense in Golang (Go language), but it provides a data type called a structure, through which object-oriented features similar to classes can be achieved. In this article, we'll explain how to use structures to implement object-oriented features and provide concrete code examples. Definition and use of structures First, let's take a look at the definition and use of structures. In Golang, structures can be defined through the type keyword and then used where needed. Structures can contain attributes

Introduction to the method of obtaining HTTP status code in JavaScript: In front-end development, we often need to deal with the interaction with the back-end interface, and HTTP status code is a very important part of it. Understanding and obtaining HTTP status codes helps us better handle the data returned by the interface. This article will introduce how to use JavaScript to obtain HTTP status codes and provide specific code examples. 1. What is HTTP status code? HTTP status code means that when the browser initiates a request to the server, the service

The Go language supports object-oriented programming, defining objects through structs, defining methods using pointer receivers, and implementing polymorphism through interfaces. The object-oriented features provide code reuse, maintainability and encapsulation in the Go language, but there are also limitations such as the lack of traditional concepts of classes and inheritance and method signature casts.

By mastering tracking object status, setting breakpoints, tracking exceptions and utilizing the xdebug extension, you can effectively debug PHP object-oriented programming code. 1. Track object status: Use var_dump() and print_r() to view object attributes and method values. 2. Set a breakpoint: Set a breakpoint in the development environment, and the debugger will pause when execution reaches the breakpoint, making it easier to check the object status. 3. Trace exceptions: Use try-catch blocks and getTraceAsString() to get the stack trace and message when the exception occurs. 4. Use the debugger: The xdebug_var_dump() function can inspect the contents of variables during code execution.

JavaScript and WebSocket: Building an efficient real-time search engine Introduction: With the development of the Internet, users have higher and higher requirements for real-time search engines. When searching with traditional search engines, users need to click the search button to get results. This method cannot meet users' needs for real-time search results. Therefore, using JavaScript and WebSocket technology to implement real-time search engines has become a hot topic. This article will introduce in detail the use of JavaScript
