<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <script src="../JS/JQuery/jquery-1.9.1.js" type="text/javascript"></script>

    <style type="text/css">

        .content

        {

            margin: 50px;

            border: 8px;

            width: auto;

            height: auto;

        }

        .title

        {

            height: 20px;

            width: auto;

        }

        .common

        {

            width: %;

            float: left;

            font-size: 20px;

            color: Black;

            background-color: #E0E0E0;

        }

        .selected

        {

            background-color: #EEE;

        }

        .contentBody

        {

            width: auto;

            height: 500px;

        }

        .contendiv

        {

            padding: 20px;

            width: %;

            height: 500px;

            float: left;

            background-color: #EEE;

        }

        .divHidden

        {

            display: none;

        }

    </style>

    <script type="text/javascript">

        $(function() {

            $(".common").click(function() {

                var divId = $(this).attr("id");

                //alert(divId);

                if (jQuery(this).attr("class").indexOf("selected") > ) {

                    //jQuery(this).removeClass("selected")

                } else {

                    $("div").removeClass("selected");

                    jQuery(this).addClass("selected");

                }

                //var list = $(".contendiv");

                $(".contendiv").addClass("divHidden");

                $("#div" + divId).removeClass("divHidden");

            });

        });

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <div class="content">

            <div class="title">

                <div id="" class="common selected">

                    Tab1

                </div>

                <div id="" class="common">

                    Tab2

                </div>

                <div id="" class="common">

                    Tab3

                </div>

            </div>

            <div class="contentBody">

                <div id="div1" class="contendiv">

                    我是tab1

                </div>

                <div id="div2" class="contendiv divHidden">

                    我是tab2

                </div>

                <div id="div3" class="contendiv divHidden">

                    我是tab3

                </div>

            </div>

        </div>

    </div>

    </form>

</body>

</html>

这个是一个最简单最原始的基本Tab切换的样子。很简单，刚学习样式布局JQuery的同学可以参考。大牛就不要拍砖了。

只要控制好头部的DIV的点击事件就OK了，下面对应的三个DIV的相对应切换隐藏。So Easy！

DIV+CSS 样式简单布局Tab 切换的更多相关文章

  1. 精通CSS+DIV网页样式与布局--图片效果

    提到图片效果,小伙伴们可能会想到美图秀秀,ps等,这些软件都是款非常不错的照片处理软件,包括常用的:黑白,增强,高斯,高对比,夜视,老照片和铅笔画等等.不管你是否是专业的 照片拍摄人员,我们都可以通过 ...

  2. 精通CSS+DIV网页样式与布局--初探CSS

    CSS英文名Cascading Style Sheet,中文名字叫层叠样式表,是用于控制页面样式并允许将样式信息与网页内容分离的一种标记性语言,DIV+CSS是WEB设计标准,它是一种网页的布局方法. ...

  3. 系列文章--精通CSS.DIV网页样式与布局学习

    精通CSS.DIV网页样式与布局(八)——滤镜的使用 精通CSS.DIV网页样式与布局(七)——制作实用菜单 精通CSS.DIV网页样式与布局(六)——页面和浏览器元素 精通CSS.DIV网页样式与布 ...

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

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

  5. div+css样式

    Div+Css 随着页面上的需求变大,许多的东西不再使用单纯的图片.按钮.文字,而是通过Div+Css来实现按钮,公司的需求就是这样,一直在弄这个模块,顺便的总结一下 列如下面的页面都是通过div+c ...

  6. div+css样式命名规则，值得收藏

    div+css样式命名规则,值得收藏 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:w ...

  7. react简单的tab切换 (styled-components)

    其实,在我们日常的编程当中,经常会碰到tab切换的模块,那么,实现他的方法也有很多中,下面是一款简单,容易理解的react tab切换方法. 通过设置state中的current 属性去控制tab 和 ...

  8. IT兄弟连 HTML5教程 DIV+CSS网页标准化布局的优势

    标准的网页都需要对内容进行布局,以前都是采用表格的定位技术,从2005年开始逐步转向DIV+CSS的布局方式,目前绝大多数的网站都是采用这种布局方式.使用DIV+CSS对网站进行布局符合W3C标准,采 ...

  9. div+css样式表的id,class的常用命名规则

    div+css样式表的id的常用命名规则如下表所示: div+css样式表的id的常用命名规则如下表所示: 页头 header 登录条 loginBar 标志 logo 侧栏 sideBar 广告 B ...

随机推荐

  1. java 泛型简介（转载）

    原文出处: absfree 1. Why ——引入泛型机制的原因 假如我们想要实现一个String数组,并且要求它可以动态改变大小,这时我们都会想到用ArrayList来聚合String对象.然而,过 ...

  2. .Net Framework 工具Mpgo.exe与Ngen.exe

    首先放出官方MSDN的文档地址 Mpgo.exe 主要用于分析程序集启动时需要哪些东西,然后将信息反馈给NGen.exe 来更好的优化本机映像,使得应用程序启动更快,工作集缩小.准备发布时,用MPGO ...

  3. 文件上传transferTo一行代码的bug

    本次的项目环境为 Running with Spring Boot v1.5.10.RELEASE, Spring v4.3.14.RELEASE, 服务器环境为CentOS7.0. transfer ...

  4. Python习题集（十三）

    每天一习题,提升Python不是问题!!有更简洁的写法请评论告知我! https://www.cnblogs.com/poloyy/category/1676599.html 题目 写一个函数,该函数 ...

  5. oracle去除重复数据与oracle分页

    一.去除oracle中重复数据,可以使用rowid列,rowid列是一个伪列,该列在数据库中灭一个表中都有,但是我们查询数据库的时候,默认都没有给我们返回这一列,这一列用来区分数据库中的每一行时间,可 ...

  6. 云CRM和本地CRM哪个更好

    现在CRM系统按照服务器部署方式的不同分为本地CRM和云CRM两种,本地CRM需要在企业内部部署服务器,而云CRM的服务器则是安装在云服务器上面,很多企业可能不知道应该选择云CRM还是本地CRM.下面 ...

  7. Tomcat 启动过滤器异常

    严重 [RMI TCP Connection(2)-127.0.0.1] org.apache.catalina.core.StandardContext.filterStart 启动过滤器异常 ja ...

  8. cmdb客户端代码完善2

    目录: 1.面试提问 2.完善采集端代码 3.唯一标识的问题 4.API的验证 1.面试会问到的问题: # 1. 为啥要做CMDB?# - 实现运维自动化, 而CMDB是实现运维自动化的基石# - 之 ...

  9. no parameterless constructor define for type 解决一例

    在生成根据模型和上下文生成带增删查改操作的视图的控制器时,提示上述信息,网上查找了资料也没有解决,突然想起该项目是连接MSSQL数据库和Redis数据库的,并且已经依赖注入了,而Redis数据库的服务 ...

  10. [暴力枚举]Codeforces Vanya and Label

    Vanya and Label time limit per test 1 second memory limit per test 256 megabytes input standard inpu ...