<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. Windows通过VNC连接并显示Linux桌面(Ubuntu16.04)

    目录 Linux中安装VNC服务 Linux中安装桌面环境 Windows中安装VNC Viewer Linux中安装VNC服务 sudo apt-get update sudo apt-get in ...

  2. 使用numpy和PIL实现图像的手绘效果

    输入 输出 代码如下 图像的手绘效果的实现 from PIL import Image import numpy as np a = np.array(Image.open("index.j ...

  3. seldom之数据驱动

    seldom之数据驱动 如果自动化某个功能,测试数据不一样而操作步骤是一样的,那么就可以使用参数化来节省测试代码. seldom是我在维护一个Web UI自动化测试框,这里跟大家分享seldom参数化 ...

  4. XSS构造剖析

    参考:邱永华<XSS跨站脚本攻击剖析与防御> 一 绕过XSS-filter 1.利用<>标记注射Html/JavaScript比如:<script>alert('X ...

  5. centos 7 中没有iptables 和service iptables save 指令使用失败问题解决方案

    1.任意运行一条iptables防火墙规则配置命令: iptables -P OUTPUT ACCEPT 2.对iptables服务进行保存: service iptables save 如果上述命令 ...

  6. .Net微服务实战之技术选型篇

    王者荣耀 去年我有幸被老领导邀请以系统架构师的岗位带技术团队,并对公司项目以微服务进行了实施.无论是技术团队还是技术架构都是由我亲自的从0到1的选型与招聘成型的,此过程让我受益良多,因此也希望在接下来 ...

  7. 关于手机淘宝3.25bug我的一些思考与建议

    这两天被手淘ios版3.25bug刷屏了,影响还是挺大的,仅3.25日当天截止到下午5点在微博上的话题阅读量,已经突破8000万.给广大网友带来一次吃瓜盛宴.我们先简单回顾下这个bug的故事线: 我查 ...

  8. P4147 玉蟾宫 题解

    原题链接 简要题意: 求最大 \(0\) 矩阵.(将字符转化为数字) 本题是模板题,可以用来爆踩.??? 悬线法 来了! 其中绿色是 \(0\),红色是 \(1\). 下面以这个图为例讲一下算法流程. ...

  9. RoBERTa

    2019-10-19 21:46:18 问题描述:谈谈对RoBERTa的理解. 问题求解: 在XLNet全面超越Bert后没多久,Facebook提出了RoBERTa(a Robustly Optim ...

  10. OpenCV-Python 改变颜色空间 | 十三

    目标 在本教程中,你将学习如何将图像从一个色彩空间转换到另一个,像BGR↔灰色,BGR↔HSV等 除此之外,我们还将创建一个应用程序,以提取视频中的彩色对象 你将学习以下功能:cv.cvtColor, ...