<!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. oracle like模糊查询

    简单的方式,使用"%" 和 "_" 字符匹配操作可以使用通配符 "%" 和 "_": %:表示任意个字符,包括零个: _ ...

  2. css3 flex盒子布局

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. 设置树莓派3 B+的静态IP

    修改/etc/dhcpcd.conf 文件 sudo vim /etc/dhcpcd.conf interface eth0 static ip_address= static routers=192 ...

  4. svn常用操作

    1将文件checkout到本地目录 svn checkout path(path是服务器上的目录) 例如:svn checkout svn://192.168.1.1/pro/domain 简写:sv ...

  5. CentOS下Apache配置多域名或者多端口映射

    CentOS下Apache默认网站根目录为/var/www/html,假如我默认存了一个CI项目在html文件夹里,同时服务器的外网IP为ExampleIp,因为使用的是MVC框架,Apache需开启 ...

  6. Underscore.js基础入门

    公司产品集成了对Underscore.js,所以需要对这个库有一定的了解.通过查阅资料,发现这个库主是对Array和JSON的处理支持.通过Underscore.js库,可以方便的对Array和JSO ...

  7. Django 之 查看执行的sql语句

    前提: 我的app名称为core,models.py内容如下: # coding:utf-8 from django.db import models # Create your models her ...

  8. （dp）343. Integer Break

    Given a positive integer n, break it into the sum of at least two positive integers and maximize the ...

  9. NET映射导致的应用无法访问

    应用环境 IIS 数据库  oracle11G 服务器 windwos2003 企业版 周一早上刚到,听到业务部门的人反应,集团的扫码抢系统登陆不上了,没办法进行出入库操作,大批货物在仓库堆积,承运车 ...

  10. Swift版的SQLiteHelper

    SQLiteHelper 创建SQLiteHelper类 /// SQLite数据库处理帮助类 /// /// 此类中封装了关于SQLite数据库处理的业务函数 class SQLiteHelper ...