DIV的圆角表现和TAB切换

时间：2014-07-22 00:12:34 阅读：246 评论：0 收藏：0 [点我收藏+]

内容大体是从网上找过来的，感觉那位哥们说的对，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>

DIV的圆角表现和TAB切换,布布扣,bubuko.com

DIV的圆角表现和TAB切换

标签：style blog http java color width

原文地址：http://www.cnblogs.com/niutouzdq/p/3858762.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行