js怎么实现tab切换效果（js面向对象带实例）
js怎么实现tab切换效果（js面向对象带实例）<li>天命风流</li> <li>薛涛笺</li><div id="div1"> <ul id="ul_l" class="clearfix "> <li class="tab-active">凉凉</li>
js的面向对象可能真的很恶心 满屏幕的this 指来指去 可能最后自己都晕了 今天给大家带来的是一个基于js的面向对象选项卡 下面先看下 最后做完的样子
对于用一般的方法大家可能都很熟悉了，两个for循环就出来了
面向对象代码确实多了很多
下面先看html结构
<div id="div1">
<ul id="ul_l" class="clearfix ">
<li class="tab-active">凉凉</li>
<li>薛涛笺</li>
<li>天命风流</li>
<li>认真的老去</li>
</ul>
<div id="div">
下面贴下全部代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="https://cdn.bootcss.com/minireset.css/0.0.2/minireset.min.css" rel="stylesheet">
<style>
.clearfix:before .clearfix:after{content: " ";display: table;}
.clearfix:after{clear: both;}
*{margin: 0;padding: 0}
body{background: #ccc;}
ul li{list-style: none;}
#div1{max-width: 960px;border: 1px solid #e5e5e5;margin: 30px auto;background: #fff;}
#ul_l{height: 34px;border-bottom: 1px solid #e5e5e5;color: #666;background: #f8f8f8}
#ul_l .tab-active{color: #00be3c;border-top: 2px solid #00be3c;background: #fff}
#ul_l li{float: left;;font: 14px/34px "Microsoft Yahei";height: 34px;
text-align: center;border-right: 1px solid #e5e5e5;width:calc(100%/4 - 6px);cursor:pointer}
#div{height: 300px;overflow-y: scroll;text-align: center}
#div div{display: none;position: relative;}
#div1 span{position: absolute;}
#div h3{font: 16px/3px "Microsoft Yahei";margin-top: 10px;padding: 15px 0;}
#div p{font-size: 14px;line-height: 20px;text-indent: 2em;margin-bottom: 10px;}
#div span{bottom: -41px;left: 50%;margin-left: -150px;}
</style>
</head>
<body>
<div id="div1">
<ul id="ul_l" class="clearfix ">
<li>凉凉</li>
<li>薛涛笺</li>
<li>天命风流</li>
<li>认真的老去</li>
</ul>
<div id="div">
<div style="display: block">
<h3></h3>
<p>杨宗纬、张碧晨 - 凉凉</p>
<p>作词：刘畅</p>
<p>作曲：谭旋</p>
<p>编曲：韦国赟</p>
<p>入夜渐微凉 繁花落地成霜</p>
<p>你在远方眺望 耗尽所有暮光</p>
<p>不思量 自难相忘</p>
<p>夭夭桃花凉 前世你怎舍下</p>
<p>这一海心茫茫 还故作不痛不痒不牵强</p>
<p>都是假象</p>
<p>凉凉夜色 为你思念成河</p>
<p>化作春泥 呵护着我</p>
<p>浅浅岁月 拂满爱人袖</p>
<p>片片芳菲 入水流</p>
<p>凉凉天意 潋滟一身花色</p>
<p>落入凡尘 伤情着我</p>
<p>生劫易渡 情劫难了</p>
<p>折旧的心 还有几分前生的恨</p>
<p>还有几分前生的恨</p>
<p>也曾鬓微霜 也曾因你回光</p>
<p>悠悠岁月漫长 怎能浪费时光</p>
<p>去流浪(去流浪)去换成长</p>
<p>灼灼桃花凉 今生愈渐滚烫</p>
<p>一朵已放心上 足够三生三世背影成双(背影成双)</p>
<p>在水一方</p>
<p>凉凉夜色 为你思念成河</p>
<p>化作春泥 呵护着我</p>
<p>浅浅岁月 拂满爱人袖</p>
<p>片片芳菲 入水流</p>
<p>凉凉天意 潋滟一身花色</p>
<p>落入凡尘 伤情着我</p>
<p>生劫易渡 情劫难了</p>
<p>折旧的心 还有几分前生的恨</p>
<p>凉凉三生三世 恍然如梦</p>
<p>须臾的年 风干泪痕</p>
<p>若是回忆不能再相认</p>
<p>就让情分 落九尘</p>
<p>凉凉十里 何时还会春盛</p>
<p>又见树下 一盏风存</p>
<p>落花有意 流水无情</p>
<p>别让恩怨爱恨 凉透那花的纯</p>
<p>吾生愿 牵尘</p>
<span >
<audio id="audio1" controls="controls">
<source src="https://img.aigexing.commusic/liang.mp3" type="audio/ogg" />
<source src="https://img.aigexing.commusic/liang.mp3" type="audio/mpeg" />
<track kind="subtitles" src="https://img.aigexing.commusic/subs_chi.srt" srclang="zh" label="Chinese">
<track kind="subtitles" src="https://img.aigexing.commusic/subs_chi.srt" srclang="en" label="English">
</audio>
<a onclick="playPause()">暂停/播放</a>
</span>
</div>
<div>
<h3>薛涛笺</h3>
<p>演唱：Tacke竹桑 诗雪</p>
<p>作曲\混音\和声：Tacke竹桑 作词：风定初</p>
<p>编曲：又又</p>
<p>二胡：EZ-Ven</p>
<p>【竹】揉碎那季桃花</p>
<p>融入素白书笺</p>
<p>这一脉心香萦绕千年</p>
<p>红烛摇残更漏</p>
<p>拨动锦瑟无端</p>
<p>任一曲轻韵弹奏无眠</p>
<p>【雪】轻束旧时锦衣</p>
<p>妆成昨日容颜</p>
<p>你和谁走过这场盛宴</p>
<p>亦颦亦笑眉眼</p>
<p>一生一次缠绵</p>
<p>你和谁完成这场沦陷</p>
<p>【竹】看着你把那桃花揉成薛涛笺 胭脂的颜色是相思的婉转</p>
<p>【雪】看着你把那梧桐写进乌丝阑 水墨的痕迹是心事的回环</p>
<p>【竹】月光酿成陈酒</p>
<p>洒满手中杯盏</p>
<p>一声叹息只是当时惘然</p>
<p>【雪】彩笔题尽断肠</p>
<p>浣花词里新篇</p>
<p>一滴泪遗在烟火人间</p>
<p>【雪】看着你把那桃花揉成薛涛笺 胭脂的颜色是相思的婉转</p>
<p>【竹】看着你把那梧桐写进乌丝阑 水墨的痕迹是心事的回环</p>
<p>【雪】月光酿成陈酒</p>
<p>洒满手中杯盏</p>
<p>一声叹息只是当时惘然</p>
<p>【竹】彩笔题尽断肠</p>
<p>浣花词里新篇</p>
<p>【合】一滴泪遗在烟火人间</p>
<p>【合】一天绛河清浅</p>
<p>一轮皓月婵娟</p>
<p>一瞬岁月迁延</p>
<p>一霎微雨空轩</p>
<p>旧游如梦，挽不住从前 你的身影，淡在烟水间</p>
<p>【合】千年后我对长夜为你倾杯盏 月光的陈酿浸透小庭院 千年后我执紫毫为你写留恋 桃花的气息落在了薛涛笺</p>
<p>【雪】犹记夕阳下驻马回望一眼</p>
<p>【竹】千年的岁月犹为谁独自闲</p>
</div>
<div>
<h3>天命风流</h3>
<p>曲：千草仙 词/文案：檀烧</p>
<p>天公爵微倾 洒下一壶酒</p>
<p>化人间多少 天命风流</p>
<p>灵秀上眉头 浩气存胸口</p>
<p>七分癫更有三分温柔</p>
<p>真与假 皆为所求</p>
<p>名与利 拿来奉酒</p>
<p>声与色 不过皮毛骨肉</p>
<p>人世多愁 自在几人能够</p>
<p>独倚高楼 总有人高歌相候</p>
<p>狂性难收 我自定我去留</p>
<p>笑他不懂 贪嗔痴不需看透</p>
<p>喧喧复嚣嚣 停停又走走</p>
<p>清风化多少 天命风流</p>
<p>烦扰总难逃 踏过不回首</p>
<p>万千种风光自在心头</p>
<p>谁又能 一生无垢</p>
<p>苦与乐 正是时候</p>
<p>且放手 看他阴谋阳谋</p>
<p>纷争不休 胜负自有缘由</p>
<p>昨夜冤仇 大笑在梦醒之后</p>
<p>志趣相投 三杯两盏淡酒</p>
<p>知己我有 风浪中与他相守</p>
<p>人世多愁 自在几人能够</p>
<p>独倚高楼 总有人高歌相候</p>
<p>狂性难收 我自定我去留</p>
<p>笑他不懂 贪嗔痴不需看透</p>
</div>
<div>
<h3>认真的老去</h3>
<p>认真的老去</p>
<p>作词：张希 曹方</p>
<p>作曲：张希</p>
<p>演唱：张希 曹方</p>
<p>忘了什么时候开始</p>
<p>到清晨才能入睡</p>
<p>也忘了什么叫做结尾</p>
<p>又有谁在乎呢</p>
<p>凌晨三点的窗前</p>
<p>播放着那段时光</p>
<p>有一个骄傲的少年</p>
<p>隐藏他的青春</p>
<p>嗯……</p>
<p>不如让我忘了自己</p>
<p>你觉得怎么样呢</p>
<p>在每个向往的地方</p>
<p>释然一个遗憾</p>
<p>躺在我怀里的吉他</p>
<p>好像厌倦了我</p>
<p>重复最熟悉的段落</p>
<p>好像无话可说</p>
<p>这生命正值春光</p>
<p>别装作刀枪不入的模样</p>
<p>别错过年轻的疯狂</p>
<p>时光很匆忙</p>
<p>别错过日落和夕阳</p>
<p>不论在哪里呀</p>
<p>来不及认真的年轻过</p>
<p>就认真的老去</p>
<p>又一次和你擦肩而过</p>
<p>一毫米的距离</p>
<p>请你（让我）再次抱起吉他</p>
<p>为你唱那一首歌</p>
<p>重复最熟悉的段落</p>
<p>就当明天不在</p>
<p>没有永远的年轻</p>
<p>没有唱不完的歌</p>
<p>当所有人都离去</p>
<p>我也将要离去</p>
<p>这生命正值春光</p>
<p>别装作刀枪不入的模样</p>
<p>别错过年轻的疯狂</p>
<p>时光很匆忙</p>
<p>别错过日落和夕阳</p>
<p>不论在哪里呀</p>
<p>来不及认真的年轻过</p>
<p>就认真的老去</p>
<p>又一次和你擦肩而过</p>
<p>一毫米的距离</p>
<p>别错过年轻的疯狂</p>
<p>时光很匆忙</p>
<p>别错过日落和夕阳</p>
<p>不论在哪里呀</p>
<p>来不及认真的年轻过</p>
<p>就认真的老去</p>
<p>又一次和你无话不说</p>
<p>开始对话以前</p>
</div>
</div>
</div>
<script>
window.onload= function () {
var Box=document.getElementById('div1')
var div=new Tab(Box);
}
function Tab(obj){
var _this=this;
this.Tab_ul=obj.getElementsByTagName('ul')[0];
this.Tab_ul_li=this.Tab_ul.getElementsByTagName('li');
this.Tab_div=obj.getElementsByTagName('div')[0];
this.Tab_div_div=this.Tab_div.getElementsByTagName('div');
for(var i=0;i<this.Tab_ul_li.length;i ){
this.Tab_ul_li[i].index=i;
this.Tab_ul_li[i].onclick= function () {
_this.TabBox(this);
}
}
}
Tab.prototype.TabBox= function (Tab_div_div) {
for(var i=0;i<this.Tab_ul_li.length;i ){
this.Tab_ul_li[i].className="";
this.Tab_div_div[i].style.display="none";
}
Tab_div_div.className="tab-active";
this.Tab_div_div[Tab_div_div.index].style.display="block";
}
var myAudio = document.getElementById('audio1');
function playPause(){
if(myAudio.paused){
myAudio.play();
}else{
myAudio.pause();
}
}
</script>
</body>
</html>
