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" " ...

随机推荐

WinForm 中 VScrollBar Maximum 问题
最近在做一个鼠标经过弹出 TreeView 面板功能 , 要求鼠标离开TreeView区域,隐藏面板. 功能如期开发,其中当TreeView 出现滚动条时,鼠标经过TreeView中的滚动条时,提前 ...
SGU 140 扩展欧几里得
题目大意: 给定序列a[] , p , b 希望找到一个序列 x[] , 使a1*x1 + a2*x2 + ... + an*xn = b (mod p) 这里很容易写成 a1*x1 + a2*x2 ...
DropMaster
DropMaster 是4个原生 VCL 控件的集合,在 Delphi 和 C++Builder 中使用.虽然包含在 Delphi 和 C++Builder 中的 VCL 组件允许同一程序内窗口之间的 ...
[网络技术]网关路由器 OSI
tracert 1.网关与路由关键的区别:网关是这样一个网络节点:以两个不同协议搭建的网络可以通过它进行通信.路由器是这样一种设备:它能在计算机网络间收发数据包,同时创建一个覆盖网络(overlay ...
一个基于atomic的卖票测试
package testAtomic; import java.util.concurrent.atomic.AtomicInteger; import sun.security.krb5.inter ...
IOS中nil/Nil/NULL的区别
类与对象的概念类是对同一类事物高度的抽象,类中定义了这一类对象所应具有的静态属性(属性)和动态属性(方法). 对象是类的一个实例,是一个具体的事物. 类与对象是抽象与具体的关系. 类其实就是一种数据 ...
Core Animation系列之CADisplayLink
一直以来都想好好学习下CoreAnimation,奈何涉及的东西太多,想要一次性全部搞定时间上不允许,以后会断断续续的补全.最近项目里用到了CADisplayLink,就顺便花点时间看了看. 一.简介 ...
java应用程序和虚拟机实例之间的关系
每一个java程序都会产生一个java虚拟机的实例.并不是说一个物理机上,运行多个java应用程序就只有一个java虚拟机实例,多少个java应用程序就有多少个java虚拟机实例.
jQuery 中 children() 与 find() 用法的区别
1.children() 与 find() 用法的区别通过children获取的是该元素的下级元素,而通过find获取的是该元素的下级所有元素.
BZOJ 1853 幸运数字
需要优化一波常数. 以及刚才那个版本是错的. #include<iostream> #include<cstdio> #include<cstring> #incl ...

DIV的圆角表现和TAB切换

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

随机推荐

热门专题