前端开发常见的tab效果

前端开发模板化方案
复用性模板开发前端
前端开发用模板引擎嘛

今天骑个摩拜上班,在路上忽然想到,都css3了,这效果可以起“翻天覆地”的变化了。
所以下班回来简单实现了一下(只写css效果,未写js效果,js切换,一般都会的吧)。

html 代码

<!DOCTYPE html>
<head>
    <meta charset=”utf-8″ />
    <meta name=”author” content=”” />
    <meta name=”keywords” content=”” />
    <meta name=”description” content=”” />
    <meta name=”viewport” content=”width=device-width,initial-scale=1.0,user-scalable=no” />
    <title> new document </title>
    <style>
        .tab {
            margin: 2em 5em;
            font-size: 14px;
        }
        .tab:after {
            display: block;
            content: “”;
            height: 0;
            clear: both;
        }
        .tab>a {
            text-decoration: none;
            padding: .5em 2em;
            border: 1px solid #CCC;
            color: #666;
            border-right-width: 0;
            float: left;
            outline: none;
        }
        .tab>a:first-child {
            border-radius: 5px 0 0 5px;
        }
        .tab>a:last-child {
            border-right-width: 1px;
            border-radius: 0 5px 5px 0;
        }
        .tab>a:focus,
        .tab>a:hover {
            border-color: blue;
            color: blue;
        }
        .tab>a:focus+a,
        .tab>a:hover+a {
            border-left-color: blue;
        }
    </style>
</head>
<body>
    <div class=”tab” id=”my_tab”>
        <a href=”javascript:;”>天下</a>
        <a href=”javascript:;”>英雄</a>
        <a href=”javascript:;”>谁敌手</a>
        <a href=”javascript:;”>曹刘</a>
    </div>
    <script>
        document.getElementById(“my_tab”).firstElementChild.focus();
    </script>
</body>
</html>
web前端开发模板
html 前端开发模板
汽车前端开发模块化
» 本文来自:前端开发者 » 《前端开发常见的tab效果》
» 本文链接地址:https://www.rokub.com/6146.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!