<!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title>原生js面向对象选项卡(点击)</title> ???<style> ???????#div1 div{ ???????????width:400px; ???????????height:300px; ???????????border:1px solid #ccc; ???????????overflow: hidden; ???????????display: none; ???????????margin: 15px 0; ???????} ???????#div1 input{ ???????????color: #fff; ???????????width:100px; ???????????height:40px; ???????????background: darkseagreen; ???????????border:none; ???????????font-size: 14px; ???????????letter-spacing: 5px; ???????} ???????#div1 p{ ???????????font-size: 20px; ???????????line-height: 24px; ???????????text-align: center; ???????????color:darkgreen; ???????} ???????#div1 .title{ ???????????padding: 0; ???????????font-weight: bold; ???????} ???????#div1 .active{ ???????????background:sandybrown; ???????????color:#fff; ???????} ???</style></head><body><div id="div1"> ???<input class="active" type="button" value="五言律诗"> ???<input type="button" value="七言律诗"> ???<input type="button" value="五言绝句"> ???<input type="button" value="七言绝句"> ???<div style="display: block;"> ???????<p class="title">落 花</p> ???????<p class="author">李商隐</p> ???????<p>高阁客竟去，小园花乱飞。</p> ???????<p>参差连曲陌，迢递送斜晖。</p> ???????<p>肠断未忍扫，眼穿仍欲归。</p> ???????<p>芳心向春尽，所得是沾衣。</p> ???</div> ???<div> ???????<p class="title">蜀 相</p> ???????<p class="author">杜甫</p> ???????<p>丞相祠堂何处寻，锦官城外柏森森。</p> ???????<p>映阶碧草自春色，隔叶黄鹂空好音。</p> ???????<p>三顾频烦天下计，两朝开济老臣心。</p> ???????<p>出师未捷身先死，长使英雄泪满襟。</p> ???</div> ???<div> ???????<p class="title">八阵图</p> ???????<p class="author">杜甫</p> ???????<p>功盖三分国，名成八阵图。</p> ???????<p>江流石不转，遗恨失吞吴。</p> ???</div> ???<div> ???????<p class="title">泊秦淮</p> ???????<p class="author">杜牧</p> ???????<p>烟笼寒水月笼沙，夜泊秦淮近酒家。</p> ???????<p>商女不知亡国恨，隔江犹唱后庭花。</p> ???</div></div><script type="text/javascript"> ???window.onload = function(){ ???????function Tab(id){ ???????????this.wrap = document.getElementById(id); ???????????this.inp = this.wrap.getElementsByTagName(‘input‘); ???????????this.div = this.wrap.getElementsByTagName(‘div‘); ???????} ???????Tab.prototype = { ???????????constructor : Tab, ???????????tabmove : function(){ ???????????????var This = this; ???????????????for(var i=0;i<this.inp.length;i++){ ???????????????????this.inp[i].index = i; ???????????????????this.inp[i].onclick = ?function(){ ???????????????????????This.tabs(this) ???????????????????} ???????????????} ???????????}, ???????????tabs:function(obj){ ???????????????for(var i=0;i<this.inp.length;i++){ ???????????????????this.inp[i].className = ‘‘; ???????????????????this.div[i].style.display = ‘none‘; ???????????????} ???????????????this.inp[obj.index].className = ‘active‘; ???????????????this.div[obj.index].style.display = ‘block‘; ???????????} ???????} ???????var t = new Tab(‘div1‘); ???????t.tabmove(); ???}</script></body></html>原生js面向对象编程-选项卡(点击)
原文地址：https://www.cnblogs.com/javascripter/p/9897551.html