<!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. jersy服务，将图片发送另个服务器，再将异步返回

    今天在学习新项目时,遇到了jersy服务,完成,将图片发送到另一台服务器.下面介绍一下jersy服务的一个简单例子. 1.建立一个jersy一个java项目,先导入jersy服务相应的jar包 com ...

  2. Hibernate之二级缓存

                                                            Hibernate之二级缓存 一.简介 Gaving King曾经对别人说,hibern ...

  3. IOS开发 strong，weak，retain，assign，copy nomatic 等的区别与作用

    strong,weak,retain,assign,copy nomatic 等的区别 copy与retain:1.copy其实是建立了一个相同的对象,而retain不是:2.copy是内容拷贝,re ...

  4. STL中list和vector在添加元素时push_back会调用拷贝构造函数

    #include <iostream> #include <list> #include <vector> #include <cstring> usi ...

  5. oracle数据库如何创建用户并授予角色

    目标:1.  创建角色test1_role,  授予 CREATE PROCEDURE, CREATE SEQUENCE, CREATE SYNONYM, CREATE TABLE, CREATE T ...

  6. selenium 关于富文本的处理

    http://www.cnblogs.com/xiaobaichuangtianxia/p/5889999.html

  7. 事实证明，abstract类除了不能用new实例化和类没什么区别

    abstract类是抽象类,不能够实例化,大家都知道,abstract类往往和接口interface一块儿使用,针对接口中一些公共的方法进行实现,然后实体类去继承抽象类和接口.虽然abstract类不 ...

  8. Oracle定时查询结果输出到指定的log文件

    最近有个监控项目需要采集数据库信息,原来方案是写个sql脚本,每个脚本放一个查询语句然后通过操作系统层su到oracle用户通过sqlpus执行这个.sql,然后加到crontab定时执行.但是这个问 ...

  9. android中MVP模式

    http://blog.csdn.net/ysh06201418/article/details/46534799 Android App整体架构设计的思考   http://blog.csdn.ne ...

  10. iOS 8潜在的取证问题

    Apple于今天正式发布了iOS 8推送升级 大概琢磨了一下: 1. 可以确定,iOS 7中存在的File relay等所谓后门服务已经被修正,目前Oxygen和我们采用这种服务提取的功能将不再适用于 ...