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>

DIV的圆角表现和TAB切换的更多相关文章

DIV+CSS 样式简单布局Tab 切换
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...
tab切换的效果——仿照今日头条APP的切换效果
说点废话;不知道是哪一版本起头条的tab切换效果就变了,一直琢磨着这个事,去度娘那里也没有什么结果:正好这两天有空就尝试做了一下:用前端的技术来实现: 先看效果吧:上面的tab随着slide滑动,上面 ...
CSS3 :target伪类实现Tab切换效果
用:target伪类实现Tab切换效果真的非常简单!简单到什么程度呢?它只需要下面这些代码. style.css: .song-info { position: absolute; backgroun ...
tab切换效果
选项卡是一个神奇的网页效果,不论大小网站,比如B2B像阿里巴巴,慧聪网,还有B2C这个不用说了吧,爱逛网店的童鞋们都知道的,像京东商城,淘宝网,拍拍网,一号店,凡客诚品,等等各种网各种网店,选项卡不仅 ...
谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
jquery+bootstrap实现tab切换, 每次切换时都请求数据, 点击提交分别向不同的地址提交数据
今天一个朋友叫帮做一个tab切换, 每一个tab内容区域都是从后台取出的数据, 这些数据要用表格的形式显示处理, 并且表格的内容区域可以修改, 如下所示: 例子查看请演示查看. 截图如图所示: 实现步 ...
基于zepto的H5/移动端tab切换触摸拖动加载更多数据
以前实现移动端的滑动加载更多实现的方法是当滚动条快到页面底部时就自动加载更多的数据,在这方面很多人都用的是"西门的后花园"写的一个叫dropload的插件,这个插件用起来也很好,很 ...
JavaScript的Tab切换
在网页设计中经常要用到tab切换,遂整理了一下常用的两种方法. 先看一下示例代码: HTML: <!doctype html> <html lang="en"&g ...
jquery实现tab切换完整代码
代码如下,保存到html文件打开: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

随机推荐

Flexbox
使用 Flexbox 的牛逼布局 .container { display: -webkit-flex; display: flex; } .initial { -webkit-flex: initi ...
javascript 错误处理
try{ var date=new Date(); date.test();//调用date的未定义的test方法; document.wrire("try块执行结束<br>&q ...
神奇的NOIP模拟赛 T1 LGTB 玩扫雷
LGTB 玩扫雷在一个n m 的棋盘上,有位置上有雷(用“*” 表示),其他位置是空地(用“.” 表示).LGTB 想在每个空地上写下它周围8 个方向相邻的格子中有几个雷.请帮助他输出写了之后的棋盘 ...
hdu 1030 Delta-wave (C++, 0ms, explanatory comments.) 分类： hdoj 2015-06-15 12:21 45人阅读评论(0) 收藏
problem description http://acm.hdu.edu.cn/showproblem.php?pid=1030 #include <cstdio> #include ...
银行支票和汇票中使用的专用字体MICR E13B条形码控件字体
MICR E13B条形码控件字体是一种在美国.加拿大.波多黎各.巴拿马.英国和其它少数国家的银行支票和汇票中使用的专用字体,主要用来打印适用于磁性和光学字符识别系统的MICR字符.MICR E13B条 ...
使用SharedPreferences进行数据存储
使用SharedPreferences进行数据存储很多时候我们开发的软件需要向用户提供软件参数设置功能,例如我们常用的QQ,用户可以设置是否允许陌生人添加自己为好友.对于软件配置参数的保存,如果是w ...
iphone判断当前网络连接类型
eachability只能区分出无网络.wifi和wwan(2G&2.5G&3G)类型的网络连接类型,只需重构networkStatusForFlags方法,即可详细区分出2G与3G网 ...
iOS 三种录制视频方式
随着每一代 iPhone 处理能力和相机硬件配置的提高,使用它来捕获视频也变得更加有意思.它们小巧,轻便,低调,而且与专业摄像机之间的差距已经变得非常小,小到在某些情况下,iPhone 可以真正替代它 ...
MouseJack：利用15美元的工具和15行代码控制无线鼠标和键盘
Bastille的研究团队发现了一种针对蓝牙键盘鼠标的攻击,攻击者可以利用漏洞控制你的电脑操作.研究团队将此攻击命名为MouseJack. 七大厂商皆中招软件工程师马克纽林说:“利用假冒的无线电脑鼠 ...
android手机连接PC无法正常安装驱动
工作当中我们经常会遇到Android手机连接PC的时候无法正确安装驱动,或者安装失败.当然找到正确的驱动文件时首选的解决方案,如果正确的驱动文件依旧无法安装成功我们可以打开我的电脑-->属性-- ...

DIV的圆角表现和TAB切换

DIV的圆角表现和TAB切换的更多相关文章

随机推荐

热门专题