面向对象---选项卡
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了面向对象---选项卡相关的知识，希望对你有一定的参考价值。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <style type="text/css"> #vv div{width: 300px;height: 300px;border: 1px solid black;display: none;} .active{background: red} </style> </head> <body> <div id="vv"> <input class="active" type="button" value=‘1‘> <input type="button" value=‘2‘> <input type="button" value=‘3‘> <div style="display: block">11111</div> <div>22222</div> <div>33333</div> </div> <script type="text/javascript"> window.onload=function(){ var aa=new Shuqian(); aa.init(); } function Shuqian(){ this.oparent=document.getElementById("vv"); this.oinput=this.oparent.getElementsByTagName("input"); this.odiv=this.oparent.getElementsByTagName("div"); } Shuqian.prototype.init=function(){ var This=this; for(var i=0;i<this.oinput.length;i++){ this.oinput[i].index=i; this.oinput[i].onclick=function(){ This.change(this); } } } Shuqian.prototype.change=function(obj){ for(var i=0;i<this.oinput.length;i++){ this.oinput[i].className=""; this.odiv[i].style.display="none"; } obj.className="active"; this.odiv[obj.index].style.display="block"; } </script> </body> </html>
以上是关于面向对象---选项卡的主要内容，如果未能解决你的问题，请参考以下文章