css3制作tab卡片选中小尖角

来源：互联网发布：开淘宝网店需要什么编辑：程序博客网时间：2024/04/27 14:02
tab选项卡在网页中经常会用到，下面是制作一种箭头指示选中效果的写法。
实现效果
<html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <meta name="viewport" content="width=device-width, initial-scale=1" />    <title>酒邻居</title>    <link href="css/main.css" rel="stylesheet" media="screen" type="text/css" />    <script src="js/jquery-1.9.1.min.js"></script>    <style type="text/css">        .tabcss {            width: 15px;            transform: rotate(45deg);            background-color: white;            position: relative;            height: 15px;            bottom: -10px;            left: 50%;            margin-left: -7.5px;        }    </style></head><body>    <div class="nav">        <a class="backward" href="MemberInfo.aspx"></a>        <span style="position: absolute; top: 15px; left: 24px; color: white; font-size: 10pt;">个人中心</span>        <span class="title" style="margin-left: -24px;">积分</span>    </div>    <form id="Form2" method="post" runat="server">        <div class="main">            <div style="background-color: rgb(191, 57, 71); color: white;">                <div style="line-height: 30px; display: flex; width: 13em; margin: 0px auto;">                    <div style="height: 1px; background-image: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.75)); margin-top: 14.5px; width: 5em;"></div>                    <div style="width: 5em; text-align: center;">总积分</div>                    <div style="height: 1px; margin-top: 14.5px; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.75), transparent); width: 5em;"></div>                </div>                <div style="text-align: center; font-size: 25pt;">                    1200                </div>                <div style="display: flex; text-align: center; height: 4em;">                    <div style="flex: 1 1 0%; margin-top: 1.5em;" onclick="tabchenge(this)">                        全部积分                    </div>                    <div style="flex: 1 1 0%; margin-top: 1.5em;" onclick="tabchenge(this)">                        积分支入                    </div>                    <div style="flex: 1 1 0%; margin-top: 1.5em;" onclick="tabchenge(this)">                        积分支出                    </div>                </div>            </div>            <div class="data" runat="server" id="ulOrderList">            </div>            <div id="Income" style="display: none">                <ul>                    <li style="background-color: white; white-space: nowrap; text-overflow: ellipsis; padding: 10px 20px;margin-bottom: 0.2em;">                        <div style="color: black;">                            消费：玛歌菩伊乐 波尔多干白葡萄酒                        </div>                        <div style="color: rgb(130, 130, 130); overflow: hidden; line-height: 16pt;">                            <div style="float: left;">                                时间：2016.02.03 16.33                            </div>                            <div style="float: right; font-size: 16pt; color: rgb(194, 72, 84);">                                +300                            </div>                        </div>                    </li>                    <li style="background-color: white; white-space: nowrap; text-overflow: ellipsis; padding: 10px 20px;margin-bottom: 0.2em;">                        <div style="color: black;">                            消费：玛歌菩伊乐 波尔多干白葡萄酒                        </div>                        <div style="color: rgb(130, 130, 130); overflow: hidden; line-height: 16pt;">                            <div style="float: left;">                                时间：2016.02.03 16.33                            </div>                            <div style="float: right; font-size: 16pt; color: rgb(194, 72, 84);">                                +300                            </div>                        </div>                    </li>                </ul>            </div>            <div id="expenditure" style="display: none">                <li style="background-color: white; white-space: nowrap; text-overflow: ellipsis; padding: 10px 20px;margin-bottom: 0.2em;">                        <div style="color: black;">                            消费：玛歌菩伊乐 波尔多干白葡萄酒                        </div>                        <div style="color: rgb(130, 130, 130); overflow: hidden; line-height: 16pt;">                            <div style="float: left;">                                时间：2016.02.03 16.33                            </div>                            <div style="float: right; font-size: 16pt; color: rgb(194, 72, 84);">                                -300                            </div>                        </div>                    </li>                    <li style="background-color: white; white-space: nowrap; text-overflow: ellipsis; padding: 10px 20px;margin-bottom: 0.2em;">                        <div style="color: black;">                            消费：玛歌菩伊乐 波尔多干白葡萄酒                        </div>                        <div style="color: rgb(130, 130, 130); overflow: hidden; line-height: 16pt;">                            <div style="float: left;">                                时间：2016.02.03 16.33                            </div>                            <div style="float: right; font-size: 16pt; color: rgb(194, 72, 84);">                                -300                            </div>                        </div>                    </li>            </div>        </div>    </form>    <script type="text/javascript">        //显示选中的tab        var tabsname = ["ulOrderList", "Income", "expenditure"];        function showtab(whichtab) {            for (var i = 0; i < 3; i++) {                if (tabsname[i] == whichtab) {                    $("#" + whichtab).css("display", "");                } else {                    $("#" + tabsname[i]).css("display", "none");                }            }        }        //tab切换脚本        var htmlslelecttab = "<div style=\"overflow: hidden;\"><div class=\"tabcss\"></div></div>";        function tabchenge(ele) {            var tabs = $(ele).parent().children();            for (var i = 0; i < 3; i++) {                $(tabs[i]).html($(tabs[i]).text().trim());                if (tabs[i] == ele) {                    $(ele).append(htmlslelecttab);                    showtab(tabsname[i]);                }            }        }    </script></body></html>
源码下载
http://pan.baidu.com/s/1pLio36V
1 0