关于选项卡效果
- 常规
- 传参（可设置多个参数值）
- 回调函数
下面是几种参考方法
常规方法
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><style> *{ margin:0;padding:0;} ul,li{ list-style: none;display: block;} .clearfix:after{ height:0;display: block;clear: both;content: "";} .type{ width:450px;margin:50px auto;border:1px solid #000001;margin-bottom: 5px;} .type ul li{ width:100px;float: left;margin-right: 10px;text-align:center;background:#ccc;height:30px;line-height: 30px;cursor: pointer;} .content{ width:450px;margin:0 auto;border:1px solid #000001;height:400px;overflow: hidden;} .content p{ display: block;height:400px;line-height: 400px;text-align: center;} .active{ background: red!important;}//className </style><body> <div class="type"> <ul class="clearfix"> <li class="active">新闻</li> <li>娱乐</li> <li>社会</li> <li>生活</li> </ul> </div><div class="content"> <p style="display:block;">新闻内容</p> <p>娱乐内容</p> <p>社会内容</p> <p>生活内容</p></div></body><script> window.onload=function(){ //获取 var typeObj=document.getElementsByClassName("type")[0]; var liArr=typeObj.getElementsByTagName("li"); var content=document.getElementsByClassName("content")[0]; var pArr=document.getElementsByTagName("p"); for(var i=0;i<liArr.length;i++){ liArr[i].index=i;// 自定义属性 liArr[i].onclick=function(){ // 将所有样式恢复到初始状态 for(var j=0;j<pArr.length;j++){ pArr[j].style.display="none"; liArr[j].className="" } //点击时的状态 this.className="active"; pArr[this.index].style.display="block"; } } } </script></html>
传参（1）
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><style> *{ margin:0;padding:0;} a{ display:inline-block;width:100px;height:40px;line-height: 40px;text-align: center;text-decoration: none;margin-right:5px;} section{ width:250px;height: 100px;line-height:100px;text-align:center;background: blanchedalmond;} #salemain{ display:none;} .active{ background:red!important;} </style><body> <div id="type" > <a href="#" class="active">生产线</a> <a href="#">销售线</a> </div> <section id="promain"> 我是生产线宝宝 </section> <section id="salemain"> 我是销售线麻麻 </section></body><script> //onclick=(形参)(实参) window.onload=function (){ var aArr=document.getElementsByTagName("a"); var secArr=document.getElementsByTagName("section"); for(var i=0;i<aArr.length;i++){ aArr[i].onclick=(function(x){ // 点击谁谁显示block 背景变改变className return function(){ for(var j=0;j<secArr.length;j++){ aArr[j].className=""; secArr[j].style.display="none"; } secArr[x].style.display="block"; aArr[x].className="active"; } })(i) } } </script></html>
传参（2）
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin:0;padding:0;} ul,li{ list-style: none;display: block;} .clearfix:after{ height:0;display: block;clear: both;content: "";} .type{ width:450px;margin:50px auto;border:1px solid #000001;margin-bottom: 5px;} .type ul li{ width:100px;float: left;margin-right: 10px;text-align:center;background:#ccc;height:30px;line-height: 30px;cursor: pointer;} .content{ width:450px;margin:0 auto;border:1px solid #000001;height:400px;overflow: hidden;} .content p{ display: none;height:400px;line-height: 400px;text-align: center;} .active{ background: red!important;} </style></head><body><div class="type"> <ul class="clearfix"> <li onclick="tab('con1')" class="active">新闻</li> <li onclick="tab('con2')">娱乐</li> <li onclick="tab('con3')">社会</li> <li onclick="tab('con4')">生活</li> </ul></div><div class="content"> <p id="con1" style="display:block;">新闻内容</p> <p id="con2">娱乐内容</p> <p id="con3">社会内容</p> <p id="con4">生活内容</p></div></body><script> function tab(tabNum){ var conArr=["con1","con2","con3","con4"] var liArr=document.getElementsByTagName("li") for(var i=0;i<conArr.length;i++){ if(conArr[i]==tabNum){ document.getElementById(conArr[i]).style.display="block"; liArr[i].className="active"; }else{ document.getElementById(conArr[i]).style.display="none"; liArr[i].className=""; } } } </script></html>
回调
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin:0;padding:0;} ul,li{ list-style: none;display: block;} .clearfix:after{ height:0;display: block;clear: both;content: "";} .type{ width:450px;margin:50px auto;border:1px solid #000001;margin-bottom: 5px;} .type ul li{ width:100px;float: left;margin-right: 10px;text-align:center;background:#ccc;height:30px;line-height: 30px;cursor: pointer;} .active{ background: red!important;} .content{ width:450px;margin:0 auto;border:1px solid #000001;height:400px;overflow: hidden;} .content p{ height:400px;line-height: 400px;text-align: center;} </style></head><body><div class="type"> <ul class="clearfix"> <li class="active">新闻</li> <li>娱乐</li> <li>社会</li> <li>生活</li> </ul></div><div class="content"> <p style="display:block;">新闻内容</p> <p>娱乐内容</p> <p>社会内容</p> <p>生活内容</p></div></body><script> var liArr=document.getElementsByTagName("li"); var pArr=document.getElementsByTagName("p"); for(var i=0;i<liArr.length;i++){ liArr[i].onclick=function(){ change(this); } } function change(clickObj){ for(var j=0;j<liArr.length;j++){ if(liArr[j]==clickObj){ liArr[j].className="active" pArr[j].style.display="block"; }else{ liArr[j].className="" pArr[j].style.display="none"; } } } </script></html>
刺骨的言语ヽ痛彻心扉
た 入场券
淩亂°似流年
左手的ㄟ右手
还没有评论，来说两句吧...