结构是这样的。<div id="container">
       <div id="sidebar"></div>
       <div id="content"></div>
</div>左边(sidebar)我放的是四个linkbutton,
然后另外有四个层,分别对应四个linkbutton。
我想实现点击linkbutton,相应的层就显示在 content  层里面。

解决方案 »

  1.   


    <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>