首页 > 代码库 > DIV的圆角表现和TAB切换
DIV的圆角表现和TAB切换
内容大体是从网上找过来的，感觉那位哥们说的对，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>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。