当前位置: 代码迷 >> Web前端 >> tab 的容易实现原理
  详细解决方案

tab 的容易实现原理

热度:251   发布时间:2012-08-25 10:06:20.0
tab 的简单实现原理

你可以将div中的内容设置为table 或者内嵌入其它div ==

?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
?<HEAD>
? <TITLE> New Document </TITLE>
?</HEAD>
?<BODY>
?<input type="button" value="div1" id="tab1" onclick="changeDiv(this)" />
?<input type="button" value="div2" id="tab2" onclick="changeDiv(this)" />
?<table>
??<tr>
???<td>
????<div id="div_tab1" style="border: 1px solid #0099CC;">
?????</br>
?????tab1 is chosed
?????</br>
????</div>
????<div id="div_tab2" style="display:none;border: 1px solid #0099CC;">
?????</br>
?????tab2 is chosed
?????</br>
????</div>
???</td>
??</tr>
?</table>


?</BODY>
?<script language="javascript">
?function changeDiv(obj){
?//?alert(obj.id);
??div_tab1.style.display="none";
??div_tab2.style.display="none";
??var tid = document.getElementById('div_'+obj.id);
?//?alert(tid);
??tid.style.display="";
??
?}
?</script>
</HTML>

  相关解决方案