使用javascript实现简单的选项卡切换

前端技术 2023/09/03 JavaScript

代码相当简洁、简单易懂，就不多废话了。

直接奉上代码：

复制代码 代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv=\"Content-type\" content=\"text/html\" charset=\"utf-8\">
        <title>js简单选项卡</title>
        <script type=\"text/javascript\" src=\"js/demo.js\"></script>

        <style type=\"text/css\">
            *{ font-size: 14px;margin: 0px;}
　　　　a{color:#a0b3d6;text-decoration: none;}
　　　　.tabs{border:1px solid #a0b3d6;margin:100px;width:350px;}
　　　　.tabs-nav a{background:#eaf0fd; line-height:30px;padding:0px 20px 0px 20px;display:inline-block;border-right:1px solid #a0b3d6;border-bottom:1px solid #a0b3d6; float:left;}
　　　　.tabs-nav .on{background:white; border-bottom:1px solid white; position:relative;}
　　　　.tabs-content{display: block; padding:20px;border-top:1px solid #a0b3d6; margin-top:-1px;}
　　　　.tabs-content_hide{display: none;}
        </style>

    </head>
    <body>
        <div class=\"tabs\" id=\"tabs\">
            <h2 class=\"tabs-nav clearfix\">
                <a href=\"javascript:;\" class=\"on\">首页</a>
                <a href=\"javascript:;\">技术</a>
                <a href=\"javascript:;\">生活</a>
                <a href=\"javascript:;\">作品</a>
            </h2>
            <div style=\"clear:both;\"></div>
            <p class=\"tabs-content\">首页</p>
            <p class=\"tabs-content_hide\">技术</p>
            <p class=\"tabs-content_hide\">生活</p>
            <p class=\"tabs-content_hide\">作品</p>
        </div>
   
    </body>
<footer></footer>
</html>

本文地址：https://www.stayed.cn/item/6131

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案