<!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. 1001. 害死人不偿命的(3n+1)猜想 (15)

    1001. 害死人不偿命的(3n+1)猜想 (15) 较简单,直接代码实现: #include <cstdio> int main() { int n; scanf("%d&qu ...

  2. 动态作用域与this +apply和call +bind

    词法作用域是一套关于引擎如何寻找变量以及会在何处找到变量的规则. (函数作用域和块作用域) JavaScript 中的作用域就是词法作用域,也就是静态作用域,由定义代码决定 动态作用域似乎暗示有很好的 ...

  3. Python基础（二）之集合

    集合以{}形式表现,一个集合中的元素各不相同,即集合体现为去重的特性.主要用于关系测试,常见的集合操作:交集.并集.插件.子集.父集.对称差集等. 设置集合: list_1 = [1,3,4,5,7, ...

  4. yum提示This system is not registered with RHN.RHN support will be disabled.

    [root@cactiez ~]# yum install mlocateLoading "security" pluginLoading "rhnplugin" ...

  5. html基础 样式

    html样式:本文演示如何在head中添加样式信息使文本格式化 <html> <head> <style type="Text/css"> h1 ...

  6. Momo自定义DialogFragment

    在Fragnment弹窗提示 XML <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&q ...

  7. Ibatis.net总是报：【ExecuteStoreCommand SqlParameterCollection 中已包含 SqlParameter】（转）

    今天很奇怪调用EF的ExecuteStoreCommand 出现了个这样的错误,怎么也调试不过,痛定思痛 原来 command被连着调用了而没有销毁掉   public static DataTabl ...

  8. oracle ebs应用产品安全性-交叉验证规则

    转自: http://blog.itpub.net/298600/viewspace-625138/ 定义: Oracle键弹性域可以根据自定义键弹性域时所定义的规则,执行段值组合的自动交叉验证.使用 ...

  9. 删除sqlserver代理任务脚本

    无法删除SQLSERVER代理任务时可用如下语句试验下 use [msdb] ) set @job_name = N'jobname' --注:job_name为维护计划对应的job name --删 ...

  10. 再见OI

    NOIP2016终章 自己弱还脑残加手残 再见OI 你好高考 你好明天 "没有泪水的日子会轻松很多 但我的心还是会痛" ------------------------------ ...