<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/lib/jquery.min.js"></script>
    <script src="smarttab.js"></script>
    <style>
        .multitab li{
            list-style: none;
            width : 50px;
            height : 20px;
            border : 1px solid #bbbbbb;
            float: left;
            cursor: pointer;
        }
        .toolbar{
            position : relative;
            top : 55px;
        }
        .toolbar>div{
            width : 50px;
            border : 1px solid #bbbbbb;
            cursor: pointer;
        }
        .multitab_page{
            display : none;
        }
        .tabselected{
            background-color: #23afff;
        }
        .multitab li::after{//伪元素，不能绑定事件，因为它不是真实存在的dom
            content: " ";
            display: block;
            height: 13px;
            width: 13px;
            background: url(Tab_Cloze.png) no-repeat 0 0;
            position: relative;
            top : -18px;
            left : 35px;
        }
        .multitab li:not(.tabselected):hover{//过滤选择器
            background-color:#BEEBEE;
        }
    </style>
    <script>
        $(function(){
            $(".toolbar>div").click(function(){
                var _tabindex = $(this).attr("toolbarindex");
                $(".multitab>ul>li[tabindex = "+_tabindex+"]").click();
            });
            $(".multitab li").click(function(){
                var _pageindex = $(this).attr("tabindex");
                $(".multitab>ul>li").removeClass("tabselected");
                $(this).addClass("tabselected");
                $(".multitab_page").hide();
                $(".multitab_page[pageindex = "+_pageindex+"]").show();
            });
            $(".multitab li::after").click(function(){
                var _pageindex = $(this).attr("tabindex");
                $(this).hide();
                $(".multitab_page[pageindex = "+_pageindex+"]").hide();
            });
        });
    </script>
</head>
<body>
    <div class="multitab">
        <ul>
            <li class = "multitab_li" tabindex="0">tab1</li>
            <li class = "multitab_li" tabindex="1">tab2</li>
        </ul>
    </div>
    <div class = "toolbar">
        <div class = "toolbar" toolbarindex = "0">1</div>
        <div class = "toolbar" toolbarindex = "1">2</div>
    </div>
    <div class = "multitab_page" pageindex = "0">page1</div>
    <div class = "multitab_page" pageindex = "1">page2</div>
</body>
</html>

css小知识之伪元素的更多相关文章

  1. CSS你所不知的伪元素的用法

    你所不知的 CSS ::before 和 ::after 伪元素用法 博客分类: Div / Css / XML / HTML5   CSS 有两个说不上常用的伪类 :before 和 :after, ...

  2. 基础知识--:before伪元素和:after伪元素

    http://book.51cto.com/art/201108/285688.htm 3.7  替换指定位置 大家都知道before和after是前.后的意思.但是奇怪的是,CSS中的:before ...

  3. CSS——你所不知的 CSS ::before 和 ::after 伪元素用法（转）

    你所不知的 CSS ::before 和 ::after 伪元素用法 CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此.前 ...

  4. 【前端词典】几个有益的 CSS 小知识

    今天偷个懒,不长篇大论,分享几个你可能不知道的 CSS 小知识. 样式的顺序 CSS 代码:   HTML 代码:   记得之前这是一道比较火的 CSS 考题,当时好像是有不少的人答错(30% 以上) ...

  5. 几个有益的 CSS 小知识

    样式的顺序 CSS 代码:   HTML 代码:   记得之前这是一道比较火的 CSS 考题,当时好像是有不少的人答错(30% 以上) 答案你们应该是知道的. 可以这样提升 CSS 性能 后代选择器 ...

  6. css ::before和::after伪元素的用法

    css ::before和::after伪元素的用法:http://blog.dimpurr.com/css-before-after/

  7. 从知乎首页用户操作入口学习到的CSS技巧 - 合理利用伪元素实现一些装饰样式

    最近在模仿做一个静态的PC版知乎,在模仿的过程中,从知乎工程师的方法中学到了不少知识,比如CSS方面的,以下介绍一个今天学到的伪元素的技巧. 示例 DOM结构为: <div class=&quo ...

  8. 你所不知的 CSS ::before 和 ::after 伪元素用法

    CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此.前几天发现了 Creative Link Effects 这个非常有意思 ...

  9. css before，after伪元素妙用

    我们知道,css伪元素包括after,before,first-letter等,通过合理的利用伪元素,我们可以让我们的结构更简洁. 通常写法如p::after{content:' '},其中conte ...

随机推荐

  1. Spring JDBC实现查询

    1 db.properties jdbc.user=root jdbc.password=920614 jdbc.driverClass=com.mysql.jdbc.Driver jdbc.jdbc ...

  2. 循环语句--for

    1.guess_age优化版v1.py #coding=utf-8 age = 22 for i in range(10): if i < 3: guess_num = int(input('i ...

  3. 修改Windows Server 2008+IIS 7+ASP.NET默认连接限制，支持海量并发连接数

    WIN7中IIS7默认配置的服务器同时最多只能处理5000个请求,如果由于某些情况(程序问题等)造成同时请求超过5000时,将会导致服务器错误.为此,修改服务器的设置,从而支持10万个同时请求. 具体 ...

  4. OAF_开发系列28_实现OAF中反编译获取class包代码JD Compiler（案例）

    20150730 Created By BaoXinjian

  5. WEB打印控件Lodop

    主页 http://www.lodop.net/

  6. python3网络爬虫笔记

    参考资料 Python官方文档 知乎相关资料(1) 这篇非常好, 通俗易懂的总览整个Python学习框架. 知乎相关资料(2) 代码实现(一): 用Python抓取指定页面 #!/usr/bin/en ...

  7. 仿QQ消息气泡提醒

    https://github.com/dkmeteor/Bubble-Notification   感谢这位作者,本例子只是封装了一下源码. 这是jar下载地址 下载之后只要引用就好.下面是一个最简单 ...

  8. C#调用C++编写的DLL函数, 以及各种类型的参数传递 （转载）

        C#调用C++编写的DLL函数, 以及各种类型的参数传递 1. 如果函数只有传入参数,比如: C/C++ Code Copy Code To Clipboard //C++中的输出函数 int ...

  9. Zepto 使用过程中遇到的问题总结

    简言之,zepto 是移动端的 jQuery,虽然很多地方不完全相同,不过详细的内容就不介绍了,主要把使用 zepto 时遇到过的问题总结一下. zepto 是分成多个模块的,最基础的文件不包含 to ...

  10. Linux 命令 创建文件

    1.vi vi 1.txt 会直接创建并打开一个文件1.txt 2.touch touch的作用是更改一个文件或目录的时间.touch 2.txt 如果2.txt不存在,则创建空文件2.txt 3.e ...