<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. flask连接数据库的URI书写格式

    1. MySQL mysql://username:password@hostname/database 2. PostgreSQL postgresql://username:password@ho ...

  2. 《自拍教程45》Python_adb实时监控Logcat日志

    接上一篇:adb命令_一键截取logcat日志, 有一天, 系统稳定性开发负责人找到我,希望我能在跑android 系统monkey的时候, 实时监控logcat的输出,如果一旦发现"jav ...

  3. （转）浅析epoll – epoll例子以及分析

    原文地址:http://www.cppfans.org/1419.html 浅析epoll – epoll例子以及分析 上篇我们讲到epoll的函数和性能.这一篇用用这些个函数,给出一个最简单的epo ...

  4. python pip 更新失败问题

    通过PIP 安装第三方库的时候出现 pip程序版本过旧,用’python -m pip install --upgrade pip‘安装’提示仍然如下 可以用管理员身份运行windows shell  ...

  5. [BJDCTF 2nd]old-hack

    进入首页: 首页告诉了我们是thinkphp5的漏洞. 知道了是哪个版本的话就搜一搜喽:最后发现是thinkphp5.0.23的命令执行 payload_1:查看根目录文件,发现flag位置 http ...

  6. 关于PS切图

    现在前端项目中碰到越来越多的图片处理问题,虽然找自己公司UI小哥哥小姐姐可以解决,但是每次都找不仅要看别人有没有时间,更得看人家脸色 唉,自己摸索着来吧(多图,流量党请注意切换WiFi): 通常切图的 ...

  7. Linux 基础篇

    本文使用系统为 :CentOS 7 1.文件操作 增: touch a.txt   #增加文件 mkdir test  # 增加目录   参数:-p 创建多级目录   ; 删: rm a.txt  # ...

  8. 文件解析漏洞总结（IIS,APACHE,NGINX）

    (本文主体来自https://blog.csdn.net/qq_36119192/article/details/82834063) 文件解析漏洞 文件解析漏洞主要由于网站管理员操作不当或者 Web ...

  9. 使用sstream进行int转换string的注意事项

    个人网站 :http://39.106.25.239/ 1.引入sstream文件 2.使用stringstream 声明 3.使用一次sstream转换后要执行成员函数.clear() 来清除str ...

  10. 强化学习之三点五：上下文赌博机（Contextual Bandits）

    本文是对Arthur Juliani在Medium平台发布的强化学习系列教程的个人中文翻译,该翻译是基于个人分享知识的目的进行的,欢迎交流!(This article is my personal t ...