<html>
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
</body>
<input type="button" value="a" onclick="change(1)">
<input type="button" value="b" onclick="change(2)">
<input type="button" value="c" onclick="change(3)">
<div id="div_1" style="width:20pxheight:20pxbackground:red">1</div>
<div id="div_2" style="width:20pxheight:20pxbackground:green">2</div>
<div id="div_3" style="width:20pxheight:20pxbackground:blue">3</div>
<script type="text/javascript" src="js/jquery1.42.min.js"></script>
<script type="text/javascript">
function change(type){
for (var i = 1i <4i++) {
if(i==type){
$('#div_'+i).show()
}else{
$('#div_'+i).hide()
}
}
}
</script>
</html>
1.写好框架，右侧所有需要显示数据的都弄好id或class。2.写一个函数收集操作行数据，请求指定接口，返回数据给右侧框架赋值。
3.左侧下拉一点onchange函数，函数要求第一步给所在行赋一个值表示要收集此行数据，第二联动切换当前行后面所有下拉列表数据，参考省市联动，第三调用2的函数收集数据请求接口给右侧赋值。
4.初始化时默认过去第一行数据请求函数给右侧赋值，避免一打开右侧是空的。
手机手打，需要示例再追问，周一晚上抽空上传。
纯js为你解答：<br><button id="btn1">选项卡1</button><br><button id="btn2">选项卡2</button><br><p id="p1" >我是第一块</p><br><p id="p2" style="display:none">我是第二块</p><br><script><br> for(var r = 1r<=2r++){<br>document.getElementById("btn"+r).setAttribute("i", r)<br>document.getElementById("btn"+r).onclick = function(){<br> for(var j = 1j<=2j++){<br>document.getElementById("p"+j).style.display = "none"<br> }<br> // alert(1)<br> document.getElementById("p"+this.getAttribute("i")).style.display = "block"<br>}<br> }<br></script><br><br>有疑问大可继续追问。
