css小知識之僞元素

時間 2019-11-08

標籤 css 知識元素欄目 CSS 简体版

原文原文鏈接

<!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>

1. CSS 僞元素
2. CSS ：僞元素
3. css 僞元素
4. CSS——僞元素
5. CSS僞元素
6. CSS 系列之僞類與僞元素
7. CSS 之僞類及僞元素
8. CSS 僞類與僞元素
9. css僞類和僞元素
10. CSS僞類與僞元素
更多相關文章...
• 與傳輸層有關的基本知識 - TCP/IP教程
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• 互聯網組織的未來：剖析GitHub員工的任性之源
• 適用於PHP初學者的學習線路和建議

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。