<!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>
原文地址：https://www.cnblogs.com/javascripter/p/9897551.html
时间： 2024-10-22 07:33:45