内容大体是从网上找过来的，感觉那位哥们说的对，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切换的更多相关文章

  1. DIV+CSS 样式简单布局Tab 切换

    <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...

  2. tab切换的效果——仿照今日头条APP的切换效果

    说点废话;不知道是哪一版本起头条的tab切换效果就变了,一直琢磨着这个事,去度娘那里也没有什么结果:正好这两天有空就尝试做了一下:用前端的技术来实现: 先看效果吧:上面的tab随着slide滑动,上面 ...

  3. CSS3 :target伪类实现Tab切换效果

    用:target伪类实现Tab切换效果真的非常简单!简单到什么程度呢?它只需要下面这些代码. style.css: .song-info { position: absolute; backgroun ...

  4. tab切换效果

    选项卡是一个神奇的网页效果,不论大小网站,比如B2B像阿里巴巴,慧聪网,还有B2C这个不用说了吧,爱逛网店的童鞋们都知道的,像京东商城,淘宝网,拍拍网,一号店,凡客诚品,等等各种网各种网店,选项卡不仅 ...

  5. 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  6. jquery+bootstrap实现tab切换, 每次切换时都请求数据, 点击提交分别向不同的地址提交数据

    今天一个朋友叫帮做一个tab切换, 每一个tab内容区域都是从后台取出的数据, 这些数据要用表格的形式显示处理, 并且表格的内容区域可以修改, 如下所示: 例子查看请演示查看. 截图如图所示: 实现步 ...

  7. 基于zepto的H5/移动端tab切换触摸拖动加载更多数据

    以前实现移动端的滑动加载更多实现的方法是当滚动条快到页面底部时就自动加载更多的数据,在这方面很多人都用的是"西门的后花园"写的一个叫dropload的插件,这个插件用起来也很好,很 ...

  8. JavaScript的Tab切换

    在网页设计中经常要用到tab切换,遂整理了一下常用的两种方法. 先看一下示例代码: HTML: <!doctype html> <html lang="en"&g ...

  9. jquery实现tab切换完整代码

    代码如下,保存到html文件打开: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

随机推荐

  1. ubuntu php.ini文件位置

    mc@XJ > locate php.ini/etc/php5/cli/php.ini/etc/php5/fpm/php.ini

  2. C++-类的const成员变量

    当类中用到一些固定值时,希望将其定义为const成员变量,防止被修改. 但因为const成员变量因为初始化之后就不能修改,因此只能在构造函数的初始化列表中初始化 如果是数组,则没有办法在初始化列表中初 ...

  3. URAL 1519 基础插头DP

    题目大意: 给定一个图,一部分点'*'作为障碍物,求经过所有非障碍点的汉密尔顿回路有多少条 基础的插头DP题目,对于陈丹琦的论文来说我觉得http://blog.sina.com.cn/s/blog_ ...

  4. UIKit-3347.44.2/UICollectionView.m:3443

    Assertion failure in -[UICollectionView _dequeueReusableViewOfKind:withIdentifier:forIndexPath:viewC ...

  5. Xrun 将 app 转化为 IPA

    xcodebuild命令行打包,在使用xcodebuild编译后发现有些东西有些临时性质的东西,依然存在,搜索了一些资料,找到有clean的命令:在之前打包都是生成app文件,将app打包成ipa文件 ...

  6. C++ primer的第一章的主要内容

    第一章主要是把C++的主要的部分简单的介绍了一下,让读者对C++开始有一个简单的了解.看完第一章的收获就是知道如何去读入不确定数目的输入,主要是形式是:whlie(cin>>s){},利用 ...

  7. poj1141 区间dp+路径

    //Accepted 176 KB 47 ms //感谢大神们为我们这群渣渣铺平前进的道路!! //用scanf("%s",s)!=EOF WA到死 #include <cs ...

  8. sidePagination: "server"和responseHandler: responseHandler

    bootstrapTable()中有两个属性 一个是sidePagination,表示服务器分页,responseHandler:responseHandler 表示回应操作的rows和total 两 ...

  9. Git 的安装和创建版本库 。

    Git 的优点就不再多说了 .直接进入正题吧 . 安装Git 首先可以尝试输入 Git 看看有没有反映 . $ git The program 'git' is currently not insta ...

  10. Python 温习

    关于Python内置函数的示例 Type "copyright", "credits" or "license()" f重写or more ...