<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. mysql的那些事之架构

    MySQL架构的那些事 此篇博客为原创,欢迎转载,转载时请注明出处,谢谢 最近深入学习了一下mysql的内容,想把自己的理解分享出来. mysql架构 逻辑架构 Connectors:连接器 Mana ...

  2. js遍历删除对象的key

    // 如果用户没有填写值,则删除对象的key. Object.keys(obj).forEach( (key) => {      if (!obj[key]) { // !obj[key]表示 ...

  3. 面试官再问我如何保证 RocketMQ 不丢失消息,这回我笑了！

    最近看了 @JavaGuide 发布的一篇『面试官问我如何保证Kafka不丢失消息?我哭了!』,这篇文章承接这个主题,来聊聊如何保证 RocketMQ 不丢失消息. 0x00. 消息的发送流程 一条消 ...

  4. hdu2838 cow sorting用树状数组求逆序对

    题目链接:http://icpc.njust.edu.cn/Problem/Hdu/2838/ 题目解法:题目给出一个1-n的排列,操作只有一种:交换相邻的元素,代价是两个元素之和,问将该序列变成升序 ...

  5. 毕业设计——基于ZigBee的智能窗户控制系统的设计与实现

    题目:基于物联网的智能窗户控制系统的设计与实现 应用场景:突降大雨,家里没有关窗而进水:家中燃气泄漏,不能及时通风,威胁人身安全,存在火灾的隐患:家中窗户没关,让坏人有机可乘.长时间呆在人多.封闭的空 ...

  6. 基础的Linux命令（二）

    本文介绍两大类命令,都是最基础的部分 系统状态监测命令 工作目录切换命令 一.系统状态监测命令 1. ifconfig 命令 用于获取网卡配置与网络状态等信息 如下图:inet后面是 IP 地址,et ...

  7. Flutter 强大的MediaQuery控件

    注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 MediaQuery 通常情况下,不会直接将MediaQu ...

  8. Linux Cgroup 入门教程：cpuset

    这是 Cgroup 系列的第四篇,往期回顾: Linux Cgroup 入门教程:基本概念 Linux Cgroup 入门教程:CPU Linux Cgroup 入门教程:内存 通过上篇文章的学习,我 ...

  9. python运算符&条件语句

    运算符 算术运算符:+ ,- , *, /, %, **,// 赋值运算符:= ,+=,-=, *=,/=,%=, **= 比较运算符:==,!=, >, <, >=,<= 成 ...

  10. coding++：mybatis update foreach （SQL循环）批量更新

    今天要做批量更新的业务,采用 mybaits 的 foreach 动态语句,遇到一些问题做下记录. 参考示例(1): <update id="" parameterType= ...