js封装选项卡

Posted 2021-01-07 shangxr

<div class="forestcamp_box">
<img src="img/home_02.jpg" />
<div class="subtitle" id="button">
<p>通知公告</p>
<p>政策解读</p>
<div>查看更多 >></div>
</div>
<div id="text" class="main_matter">
<div class="main_matter">
<p>黔西南高速交警大队“四个狠抓” 强化道路交通事故预防工作</p>
<p>扩大共识，精诚合作——中俄运输合作分委会第22次会议在俄......</p>
<p>何建中在湖北调研时指出：进一步做好总体谋划完善标准规范......</p>
<p>【评论】平台公司应当将“自责”落实到行动上</p>
<p>【见证40年·我们的奋斗故事】“内河船不跨省” 到江海联运通全球</p>
<p>云南首个高速公路债券项目上市募资</p>
<p>《2017年全国收费公路统计公报》解读</p>
<p>交通运输部关于《通航建筑物运行管理办法（征求意见稿）》公开......</p>
</div>
<div class="main_matter">
<p>【见证40年·我们的奋斗故事】“内河船不跨省” 到江海联运通全球</p>
<p>云南首个高速公路债券项目上市募资</p>
<p>《2017年全国收费公路统计公报》解读</p>
<p>交通运输部关于《通航建筑物运行管理办法（征求意见稿）》公开......</p>
</div>
</div>
</div>

没有把贴入，看贴图吧

封装好的选项卡进行调用
change({
　　btnsId:"button",//传入按钮父级id
　　contsId:"text",//传入块元素父级id
   　 btnsClassNormal:"title_noraml",// 传入按钮未点击样式
　　btnsClassSpecial:"title_specil"//传入按钮点击后样式
   });

对选项卡进行封装
function change(cha){
　　var btns = document.getelementById(cha.btnsId).children;//获取你要进行点击的按钮
　　var conts = document.getelementById(cha.contsId).children;//获取你要对应操作的块
　　for (var i=0;i<btns.length;i++) {
　　　　btns[i].index = i;　//设置一个index属性使按钮和块进行对应

　　　　btns[i].onclick=function(){

　　　　　　for (var j=0;j<conts.length;j++) {//清空
　　　　　　　btns[j].className = cha.btnsClassNormal; 
　　　　　　　　conts[j].style.display = "none";
　　　　　　}
　　　　this.className = cha.btnsClassSpecial;//点击的进行样式添加
　　　　conts[this.index].style.display = "block";//对应块显示出来
　　　　}
　　}
}