javascript - 求救，怎么通过radio切换面板
本文介绍了javascript - 求救，怎么通过radio切换面板的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
不用JQ，求原生JS方法
有没有更好的写法
解决方案
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>OOP</title>
<style type="text/css">
*{margin:0; padding: 0;list-style: none}
.tab-box{
width:400px;
height: 400px;
border: 1px solid #ccc;
clear:both;
}
.tab{
width: 400px;
height: 30px;
line-height: 30px;
}
.tab ul li{
float: left;
width:100px;
text-align: center;
background: grey;
-moz-box-sizing:border-box;
}
.tab ul li.current{
background: red;
}
.tab-content{
width:500px;
}
.tab-content ul li{
display:none;
float:left;
}
</style>
</head>
<body>
<div class="tab-box">
<div class="tab" id='js-tabul'>
<ul>
<li>数学</li>
<li>语文</li>
<li>物理</li>
<li>英文</li>
</ul>
</div>
<div class="tab-content" id="js-tab-content">
<ul>
<li>数学</li>
<li>语文</li>
<li>物理</li>
<li>英文</li>
</ul>
</div>
</div>
<div class="tab-box">
<div class="tab" id='js1-tabul'>
<ul>
<li>数学</li>
<li>语文</li>
<li>物理</li>
<li>英文</li>
</ul>
</div>
<div class="tab-content" id="js1-tab-content">
<ul>
<li>数学</li>
<li>语文</li>
<li>物理</li>
<li>英文</li>
</ul>
</div>
</div>
<script type="text/javascript">
function switchTab(tabname,tabcont){
this.tabname = tabname;
this.tabcont = tabcont;
this.clickevent = function(){
var i = 0;
for(;i<this.tabname.length;i++){
this.tabname[i].index = i;
this.tabname[0].className = "current";
this.tabcont[0].style.display = "block";
var self =this;
this.tabname[i].onclick=function(){
for(i=0;i<self.tabname.length;i++){
self.tabname[i].className = '';
self.tabcont[i].style.display = "none";
}
this.className = "current";
self.tabcont[this.index].style.display = "block";
};
}
};
}
var tab1 = new switchTab(document.getElementById('js-tabul').getElementsByTagName('li'),document.getElementById('js-tab-content').getElementsByTagName('li'))
tab1.clickevent();
var tab2 = new switchTab(document.getElementById('js1-tabul').getElementsByTagName('li'),document.getElementById('js1-tab-content').getElementsByTagName('li'))
tab2.clickevent();
</script>
</html>之前自己写的原生tab选项卡。你把对应的li改成raido,或者直接模仿用li直接模仿radio,这个是面向对象的写法，希望对你有帮助
这篇关于javascript - 求救，怎么通过radio切换面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
