<!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. 基于WebDriverAgent代理服务，实现iOS手机app自动化测试的框架搭建

    iOS自动化测试一直使用的appium,iOS系统升级至10.0 Xcode8.0之后, 改用WebDriverAgent代理服务作为server,编写了一套基于WebDriverAgent服务 ap ...

  2. 5. Longest Palindromic Substring

    Given a string S, find the longest palindromic substring in S. You may assume that the maximum lengt ...

  3. IOS自定义表格UITableViewCell

    在UITableView中,自定义表格,最原始是继承UITableViewCell,然后通过写代码方式去搞,但是这个费事了. 1.在storyboard中 给一个ViewController的tabi ...

  4. oracle之sequence详解

    Oracle提供了sequence对象,由系统提供自增长的序列号,每次取的时候它会自动增加,通常用于生成数据库数据记录的自增长主键或序号的地方. sequence的创建需要用户具有create seq ...

  5. VS2010 下 将 EntityFramework 的版本从 4.0 升级到 5.0

    1. 下载安装 EF 5.x DbContext Generator for C# : 下载地址:https://visualstudiogallery.msdn.microsoft.com/da74 ...

  6. 关于Winform 2.0以后多线程不能更新UI的办法

    DotNet 2.0以后Winform在多线程Debug模式下更新UI会报这个错: 线程间操作无效: 从不是创建控件"XXX"的线程访问它. 解决办法如下: 1.在Winform的 ...

  7. Conway's law(康威定律)

    Mel Conway  康威在加利福尼亚理工学院获得物理学硕士学位,在凯斯西储大学获得数学博士学位.毕业之后,他参与了很多知名的软件项目,如 Pascal 编辑器.在他的职业生涯中,康威观察到一个现象 ...

  8. 使用VS2010在Coding.net上进行代码托管

    网上有VS2010和Github结合使用办法,但是Github在国内使用太慢,本文使用相同的配置方法稍作改动让VS2010代码托管在coding.net平台上.由于只是稍做记录让自己不会遗忘,所以叙述 ...

  9. sql-分组排序

    我们有一张数据表,需要按照[类别]分组按照[时间]排序,并分组显示各自的序号. 表Archive ArchiveId varchar(30) 文章编号非数字 CategoryId int 文章分类Id ...

  10. 最短路模板（Dijkstra & Dijkstra算法+堆优化 & bellman_ford & 单源最短路SPFA）

    关于几个的区别和联系:http://www.cnblogs.com/zswbky/p/5432353.html d.每组的第一行是三个整数T,S和D,表示有T条路,和草儿家相邻的城市的有S个(草儿家到 ...