tab切换点击不同的radio按钮，active是变换图片

zjxcoolgirl 2015-10-23 04:06:12

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>兼容IE7 IE8 FF 等主流浏览器多标签滑动门－设计源websjy.com</title>
<style type="text/css">
body{
color: #000000;
font-family: "宋体", arial;
font-size: 16px;
background: #FFFFFF;
text-align: left;
margin: 0;
}
.nTab{
float: left;
margin: 0 auto;
border-bottom:0px;
background:#FFFFFF;
background-position:left;
background-repeat:repeat-y;
margin-bottom:2px;
}
.nTab .TabTitle{
clear: both;
height: 37px;
overflow: hidden;
}
.nTab .TabTitle ul{
margin:0;
padding:0;
}
.nTab .TabTitle li{
float: left;
width: 115px;
cursor: pointer;
padding-top: 0px;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
list-style-type: none;
}
.nTab .TabTitle .active{ border-left:1px #FFFFFF solid;border-top:1px #FFFFFF solid;border-bottom:1px #FFFFFF solid;}
.nTab .TabTitle .normal{ border-top:1px #FFFFFF solid;border-bottom:1px #FFFFFF solid;}
.nTab .TabContent{
width:auto;background:#FFFFFF;
margin: 0px auto;
padding:20px 0 0 0;
border-right:0px solid;border-left:0px solid;
}
.none {display:none;}
#myTab0 li{ background:#C0F;}
#myTab0 li.active{ background:#FC3;}
.TabContent li.active{ background:url(img/mbox-tips-btn_500d963.png) no-repeat;}
ul li{ list-style-type:none; float:left;}
</style>
<script type="text/javascript">
function nTabs(thisObj, Num) {
if (thisObj.className == "active") return;
var tabObj = thisObj.parentNode.id;
var tabList = document.getElementById(tabObj).getElementsByTagName("li");

for (i = 0; i < tabList.length; i++) {
if (i == Num) {
thisObj.className = "active";
document.getElementById(tabObj + "_Content" + i).style.display = "block";
} else {
tabList[i].className = "normal";
document.getElementById(tabObj + "_Content" + i).style.display = "none";
}
}
}
</script>
</head>
<body>
<br />
<br />
<center>
<div style="text-align:center; margin-left:30px;">

<div class="nTab">

<div class="TabTitle">
<ul id="myTab0">
<li class="active" onClick="nTabs(this,0);">切换</li>
<li class="normal" onClick="nTabs(this,1);">交换</li>
</ul>
</div>

<div class="TabContent">
<div id="myTab0_Content0">
<ul>
<li class="active"><img src="img/1.jpg"><input type="radio" name="hua" checked/></li>
<li><img src="img/2.jpg"><input type="radio" name="hua" checked/></li>
</ul>
</div>
<div id="myTab0_Content1" class="none">
<ul>
<li><img src="img/3.jpg"><input type="radio" name="hua" checked/></li>
</ul>
</div>
</div>

</div>
</center>
</body>
</html>

...全文