关于 JAVASCRIPT ，弹出层的相关疑问解决方法

关于 JAVASCRIPT ，弹出层的相关疑问
结构是这样的。

HTML code


<div id="container">
       <div id="sidebar"></div>
       <div id="content"></div>
</div>

左边(sidebar)我放的是四个linkbutton，
然后另外有四个层，分别对应四个linkbutton。
我想实现点击linkbutton，相应的层就显示在 content 层里面。

------解决方案--------------------

JScript code


<html>
<head>
<script type="text/javascript">
function runMe(name){
document.getElementById('linka').style.display="none";
document.getElementById('linkb').style.display="none";
document.getElementById('linkc').style.display="none";
document.getElementById('linkd').style.display="none";

document.getElementById(name).style.display="block";
}
</script>
</head>
<body style="width:100%;height:100%">
<div id="container" style="width:100%;height:100%;">
<table style="width:100%;height:100%;"><tr><td style="width:20%;height:100%;">
       <div id="sidebar" style="background:#cccc00;width:100%;height:100%">
       <input type="button" value="aaaa" onclick="runMe('linka')"><br>
       <input type="button" value="bbbb" onclick="runMe('linkb')"><br>
       <input type="button" value="cccc" onclick="runMe('linkc')"><br>
       <input type="button" value="dddd" onclick="runMe('linkd')"><br>
       </div>
       </td><td style="width:80%;height:100%;">
       <div id="content" style="background:#cccccc;whith:100%;height:100%">
       <div id="linka" style="display:none;background:#ffeedd;width:10%;height:10%">aaaa</div>
       <div id="linkb" style="display:none;background:#ccbbaa;width:10%;height:10%">bbbb</div>
       <div id="linkc" style="display:none;background:#8899aa;width:10%;height:10%">cccc</div>
       <div id="linkd" style="display:none;background:#aabbcc;width:10%;height:10%">dddd</div>
       </div>
       </td><tr></table>
</div>
</body>
<html>

关于 JAVASCRIPT ，弹出层的相关疑问解决方法

相关推荐