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

随机推荐

PhpStorm注册码 key license
User name: EMBRACE License key: ===== LICENSE BEGIN =====43136-1204201000002UsvSON704l"dILe1PVx ...
ECMAScript 6新特性（1）数组篇
数组现有的方法: .concat():连接两个或更多的数组,并返回结果. .join():把数组的所有元素放入一个字符串.元素通过指定的分隔符进行分隔. .pop():删除并返回数组的最后一个元素 . ...
iOS app调试的黑魔法--第三方库
http://www.cocoachina.com/ios/20140928/9785.html
Python开发入门与实战1-开发环境
1.搭建Python Django开发环境 1.1.Python运行环境安装 Python官网:http://www.python.org/ Python最新源码,二进制文档,新闻资讯等可以在Pyth ...
pager分页框架体会
<pg:pager> 元素的属性中: maxPageItems说的是每页偏移量是多少,这个并不是说每一页显示多少,而是第二页比第一页来说,在第一页的尾部增加多少,第一页又被覆盖多少,是决定 ...
有关PHP的字符串知识
字符串是由一系列字符组成,在PHP中,字符和字节一样,也就是说,一共有256种不同字符的可能性. 字符串型可以用三种方法定义:单引号形式.双引号形式和Heredoc结构形式. 1.每条指令可要记得使用 ...
JS 用window.open()函数，父级页面如何取到子级页面的返回值？
父窗口:<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> ...
极客DIY：廉价电视棒玩转GNSS-SDR，实现GPS实时定位
0×00 前言 GNSS是Global Navigation Satellite System的缩写.中文称作:全球卫星导航系统.全球导航卫星系统. GNSS泛指所有的卫星导航系统,包括全球的.区域的 ...
并非然并卵的z-index
最近做一些东西的时候总觉得加上z-index和不加对于最终的显示结果并没有什么区别,开始以为一张图片把z-inde的值调小一点儿,就可以当做背景图片一样使用,跟background是一样的,在试过几次 ...
Python的交互式界面编写 .
from tkinter import * # 导入tkinter模块的所有内容 root = Tk() # 创建一个文本Label对象 textLabel = Label(root, # 将内容绑定 ...

DIV的圆角表现和TAB切换

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

随机推荐

热门专题