您的位置：首页 > Web前端 > CSS

非常简单的JS选项卡，没改样式

2009-11-16 22:21 211 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>简单的选项卡</title>
</head>
<mce:script type="text/javascript"><!--
function dis(dd1,dd2,dd3){
document.getElementById(dd1).style.display = "";
document.getElementById(dd2).style.display = "none";
document.getElementById(dd3).style.display = "none";
}
// --></mce:script>
<body>
<div style="width:523px; height:150px; margin:0 auto; border:1px solid yellow; margin-top:140px;">
<div style=" height:150px; width:150px; float:left; border:1px dashed red; "onclick="dis('d1','d2','d3')">１</div>
<div style=" height:150px; width:150px; float:left; border:1px dashed red;margin-left:20px;" onclick="dis('d2','d1','d3')">２</div>
<div style=" height:150px; width:150px; float:left; border:1px dashed red;margin-left:20px;" onclick="dis('d3','d2','d1')">３</div>
</div>

<div id = "d1" style="border:1px solid yellow; height:100px; width:300px; display:none;">
选项一
</div>

<div id = "d2" style="border:1px solid red; height:100px; width:300px;">
选项二
</div>

<div id = "d3" style="border:1px solid; height:100px; width:300px; display:none;">
选项三
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航