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

随机推荐

Problem C 链表
Description 某部队进行新兵队列训练,将新兵从一开始按顺序依次编号,并排成一行横队,训练的规则如下:从头开始一至二报数,凡报到二的出列,剩下的向小序号方向靠拢,再从头开始进行一至三报数,凡报 ...
matlab 画框（二）去白边
在matlab图像处理中,为了标识出图像的目标区域来,需要利用plot函数或者rectangle函数,这样标识目标后,就保存图像. 一般saves保存的图像存在白边,可以采用imwrite对图像进行保 ...
matlab函数调用及数据传递
http://www.cnblogs.com/duanp/archive/2008/11/29/Matlab-GUIDE.html函数调用在一个m文件中,可以定义多个函数,但是文件名一定要与第一个函 ...
未能加载文件或程序集“System.WEB.DataVisualization, Version=3.5.0.0, Culture=neutral
项目打开提示如题错误. 最近用VS2010 + .NET Framework3.5SP1开发程序,使用了MsChart,但是部署到服务器的时候提示如下错误: 分析器错误消息: 未能加载文件或程序集 ...
hql语句理解2
/* * this.getSession().createQuery("sdfdf").executeUpdate();这里面的query可以是delete,update,inse ...
iOS 网络判定
由于流量精灵需要在蜂窝数据或者3G 环境下进行流量监控因此需要判定3G 环境将 SystemConfiguration.framework 添加进工程: 引入头文件 #import <Sys ...
《JAVA学习笔记（1---13-4）》
[1]问题: 1.什么叫做面向过程? 2.什么叫做面向对象? 解答: 1: 所谓的面向过程就是我们是一个执行者,我们要开发一个项目,这个项目要求要实现很多功能,作为执行者的我们就需要去一个一个的找这 ...
主线程中一定不能放耗时操作，必须要开子线程，比如下载文件，不然会不让你拿到输入流--报错显示android.os.NetworkOnMainThreadException
1.必须要开子线程来操作耗时操作,android.os.NetworkOnMainThreadException new Thread(new Runnable() { @Override publi ...
黑马程序员——【Java基础】——面向对象（二）异常机制、包（Package）
---------- android培训.java培训.期待与您交流! ---------- 一.异常机制 (一)异常概述 1.异常:就是程序在运行时出现不正常情况. 2.异常类:程序在运行时,出现的 ...
postfix 邮件备份方法
postfix 邮件备份方法: postfix的bcc(密送)功能可以根据条件,将所有经过postfix队列的邮件根据规则密送到指定的邮箱. postfix带有三个bcc参数: ①.always_bc ...

DIV的圆角表现和TAB切换

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

随机推荐

热门专题