内容大体是从网上找过来的，感觉那位哥们说的对，css还是比较靠谱的，当然有些高玩搞出来的东西本地
没有运行起来。
把自己的应用贴出来同大家分享
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Cache-Control" content="no-cache"> <title>Div with fillet set and Tab change</title> <style type="text/css"> /* div with fillet setting style*/ b.rtop, b.rbottom{ display:block; background: white; /* set this color as same as bgcolor*/ } b.rtop b, b.rbottom b{ display:block; height: 1px; overflow: hidden; /* the soul to solve this problem*/ background:#6DA6D9 } b.rbottom b.r1{ margin: 0 5px } b.rbottom b.r2{ margin: 0 3px } b.rbottom b.r3{ margin: 0 2px } b.rbottom b.r4{ margin: 0 1px; height: 2px } b.rtop b.r1{ margin: 0 5 0 0px } b.rtop b.r2{ margin: 0 3 0 0px } b.rtop b.r3{ margin: 0 2 0 0px } b.rtop b.r4{ margin: 0 1 0 0px; height: 2px } </style> <script type="text/javascript"> // tab change function setTab(name,cursel,n){ for(i=1;i<=n;i++){ var con=document.getElementById("con_"+name+"_"+i); con.style.display=i==cursel?"block":"none"; } // back ground color var bgcolor; if(cursel==1){ bgcolor="#6DA6D9"; } else if(cursel==2){ bgcolor="#FF7D93"; } else if(cursel==3){ bgcolor="#8FC26C"; } else if(cursel==4){ bgcolor="#D2A000"; } document.getElementById("contentscroll").style.background=bgcolor; document.getElementById("r1top").style.background=bgcolor; document.getElementById("r2top").style.background=bgcolor; document.getElementById("r3top").style.background=bgcolor; document.getElementById("r4top").style.background=bgcolor; document.getElementById("r1buttom").style.background=bgcolor; document.getElementById("r2buttom").style.background=bgcolor; document.getElementById("r3buttom").style.background=bgcolor; document.getElementById("r4buttom").style.background=bgcolor; // fillet set if(cursel!=1){ document.getElementById("r1top").style.margin="0 5px"; document.getElementById("r2top").style.margin="0 3px"; document.getElementById("r3top").style.margin="0 2px"; document.getElementById("r4top").style.margin="0 1px"; } else { document.getElementById("r1top").style.margin="0 5 0 0px"; document.getElementById("r2top").style.margin="0 3 0 0px"; document.getElementById("r3top").style.margin="0 2 0 0px"; document.getElementById("r4top").style.margin="0 1 0 0px"; } } </script> </head> <body> <div class="Menubox"> <span id="tab1" style="background: #6DA6D9; cursor: pointer;" onclick="setTab('tab',1,4)" >tab1</span> <span id="tab2" style="background: #FF7D93; cursor: pointer;" onclick="setTab('tab',2,4)" >tab2</span> <span id="tab3" style="background: #8FC26C; cursor: pointer;" onclick="setTab('tab',3,4)" >tab3</span> <span id="tab4" style="background: #D2A000; cursor: pointer;" onclick="setTab('tab',4,4)" >tab4</span> </div> <div id="ContentBox" style="width: 800px;" > <b class="rtop"> <b id="r1top" class="r1"></b> <b id="r2top" class="r2"></b> <b id="r3top" class="r3"></b> <b id="r4top" class="r4"></b> </b> <div id="contentscroll" style="overflow-y: auto; height: 400px; width: 800px; border-color: white; background-color: #6DA6D9;"> <!-- tab block 1 --> <div id="con_tab_1" style="margin: 0 20px; border-style: solid; border-color: #33339A; border-width: 0px;background-color: #6DA6D9;"> <h3>tab block 1</h3> </div> <!-- tab block 2 --> <div id="con_tab_2" style="margin: 0 20px; border-style: solid; border-color: #33339A; border-width: 0px; background-color: #FF7D93; display:none;"> <h3>tab block 2</h3> </div> <!-- tab block 3 --> <div id="con_tab_3" style="margin: 0 20px; border-style: solid; border-color: #33339A; border-width: 0px; background-color: #8FC26C; display:none;"> <h3>tab block 3</h3> </div> <!-- tab block 4 --> <div id="con_tab_4" style="margin: 0 20px; border-style: solid; border-color: #33339A; border-width: 0px; background-color: #D2A000; display:none;"> <h3>tab block 4</h3> </div> </div> <b class="rbottom"> <b id="r4buttom" class="r4"></b> <b id="r3buttom" class="r3"></b> <b id="r2buttom" class="r2"></b> <b id="r1buttom" class="r1"></b> </b> </div> </body> </html>
