oop Tab

来源：互联网发布：二次元轻小说软件编辑：程序博客网时间：2024/06/06 04:01
这段时间回顾了下js的oop,先上一段简单明了的oop Tab,过段时间再补上设置参数的oop Tab
<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Tab</title><style type="text/css">*{margin: 0;padding: 0;}ul li{list-style: none;}.tab{width: 408px;margin: 100px auto;}ul.nav li{float: left;width: 100px;margin-right: 2px;height: 50px;text-align: center;line-height: 50px;background-color: #666;color: #fff;cursor: pointer;position: relative;}ul.nav li.on:after{content: "";border-right: 8px solid transparent;border-left: 8px solid transparent;border-top: 8px solid #000;position: absolute;left: 50%;transform: translateX(-50%);bottom: -8px;}ul.nav li.on{background-color: #000;color: #fff;}ul.content{width: 404px;border: 1px solid #f00;height: 200px;}ul.content li{text-align: center;line-height: 150px;display: none;color: #000;}ul.content li.active{display: block;}</style></head><body><div class="tab"><ul class="nav"><li class="on">js</li><li>jquery</li><li>angular</li><li>Vue</li></ul><ul class="content"><li class="active">javascript</li><li>JQ</li><li>AngularJS</li><li>Vue.js</li></ul></div><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script><script type="text/javascript">/*原生js*/var lis = document.querySelectorAll(".nav li");var content = document.querySelectorAll(".content li");for(var i = 0;i<lis.length;i++){lis[i].id = i;lis[i].onclick = function(){for(var j = 0;j<lis.length;j++){lis[j].className = "";content[j].style.display = "none";}this.className = "on";content[this.id].style.display = "block";}}var timer = setInterval(autoPlay,1000);var index = 0;function autoPlay(){if(index >= lis.length){index = 0;}for(var i = 0;i<lis.length;i++){lis[i].className = "";content[i].style.display = "none";}lis[index].className = "on";content[index].style.display = "block";index++;}/*jquery*/$(function(){$(".nav li").on("mouseover",function(){$(this).addClass("on").siblings().removeClass("on");$(".content li").eq($(this).index()).show().siblings().hide();})})//oopfunction Tab(){this.lis = document.querySelectorAll(".nav li");this.content = document.querySelectorAll(".content li");var _this = this;for(var i = 0;i<this.lis.length;i++){this.lis[i].id = i;this.lis[i].onclick = function(){_this.clickTab(this);}}Tab.prototype.clickTab = function(target){for(var i = 0;i<this.lis.length;i++){this.lis[i].className = "";this.content[i].style.display = "none";}target.className = "on";this.content[target.id].style.display = "block";}}new Tab();