<!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>