js 选项卡封装

function tab(input,div){
			for(var i = 0; i < input.length; i++){
				input[i].index = i;
				input[i].onclick = function (){
					for(var i = 0; i < input.length;i++){
						input[i].className ="";
						div[i].style.display = "none";
					}
					this.className = "active";
					div[this.index].style.display ="block";
				}
			}
		}

  

时间: 2024-12-27 14:37:24

js 选项卡封装的相关文章

js学习总结----选项卡封装

这个插件对应的html的结构如下 <div class='box' id='tabFir'> <ul id='tabOptions'> <li class='select'>页卡一</li> <li>页卡二</li> <li>页卡三</li> </ul> <div class='select'> <div>1</div> <div>2</div&

Node.js模块封装及使用

Node.js中也有一些功能的封装,类似C#的类库,封装成模块这样方便使用,安装之后用require()就能引入调用. 一.Node.js模块封装 1.创建一个名为censorify的文件夹 2.在censorify下创建3个文件censortext.js.package.json.README.md文件 1).在censortext.js下输入一个过滤特定单词并用星号代替的函数. var censoredWorlds=["sad","bad","mad&

简单的JS运动封装实例---侧栏分享到

1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 #div1 {width: 100px; height: 200px; background: red;

react request.js 函数封装

1.request.js  函数封装 import { Toast } from 'antd-mobile'; import axios from 'axios'; import store from '../store'; import { push } from 'react-router-redux'; import qs from 'qs'; // 请求路径 const BaseUrl = 'https://www.baidu.com/'; // 主机及端口 //axios默认配置请求的

常用js方法封装

常用js方法封装 var myJs = { /* * 格式化日期 * @param dt 日期对象 * @returns {string} 返回值是格式化的字符串日期 */ getDates: function(dt) { var str = ""; //存储时间的字符串 //获取年 var year = dt.getFullYear(); //获取月 var month = dt.getMonth() + 1; //获取日 var day = dt.getDate(); //获取小时

step by step教你常用JS方法封装(一) [ 大杂烩 ]

本文参考原文-http://bjbsair.com/2020-03-25/tech-info/6338/ 持续更新中... 常用JS方法封装方法预告: 项目常用JS方法封装(二) [ 时间处理 ] 项目常用JS方法封装(三) [ 字符串相关处理 ] 项目常用JS方法封装(四) [ 数组相关处理 ] 使用方法非常简单,只需放到你的 utils.js 工具文件中,直接 export const 加上我的封装方法,在别的文件中使用{方法1,方法2,方法3...}引用后就可以直接使用了! 001.输入一

用js同时封装两个函数,任意调用不同格式选项卡

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style> *{ margin: 0; padding: 0; } ul,ol{ list-style: none; } .tab{ width: 500px; height: 300px; margin: 0 auto; position: relative; ov

深入浅出JS的封装与继承

JS虽然是一个面向对象的语言,但是不是典型的面向对象语言.Java/C++的面向对象是object - class的关系,而JS是object - object的关系,中间通过原型prototype连接,父类和子类形成一条原型链.本文通过分析JS的对象的封装,再探讨正确实现继承的方式,然后讨论几个问题,最后再对ES6新引入的类class关键字作一个简单的说明. JS的类其实是一个函数function,由于不是典型的OOP的类,因此也叫伪类.理解JS的类,需要对JS里的function有一个比较好

js jq封装ajax方法

json文本格式 { "userInfo":[ {name:"admin",password:"123"}, {name:"admin1",password:"123"} ] } js: window.onload=function(){ var txtName=..; var txtPwd=..; var url="Login.aspx?name="+txtName.value+&qu