zoukankan      html  css  js  c++  java
  • javascript简单的选项卡

    实现一个简单的选项卡功能

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>一个选项卡</title>
        <style type = "text/css">
            *{
                padding:0;
                margin:0;
            }
            #main {
                width:600px;
                height:300px;
                background:white;
                border:2px solid red;
                position:relative;
                margin:50px auto;
            }
            ul {
                height:49px;
                background:grey;
                font-size:30px;
                line-height:49px;
                color:red;
                list-style-type:none;
                border-bottom:1px dotted grey;
            }
            li {
                width:200px;
                float:left;
                text-align:center;
            }
            li#active{
                background:white;
            }
            p {
                font-size:40px;
                text-align:center;
            }
            .content>div {
                display:none;
            }
            .content>div#play {
                display:block;
                height:250px;
                background:red;
            }
    
    
    
        </style>
    </head>
    <body>
        <div id = "main">
            <ul class = "lis">
                <li id="active">电影</li>
                <li>娱乐</li>
                <li>数码</li>
            </ul>
            <div class = "content">
                <div id = "play" class="action">
                    <p>
                        this is a movie
                    </p>
                </div>
                <div class="action">
                    <p>
                        this is about entertainment
                    </p>
                </div>
                <div class="action">
                    <p>
                        this is about digital product
                    </p>
                </div>
            </div>
        </div>
    </body>
        <script type = 'text/javascript'>
            var lis = document.getElementsByTagName("li");
            var con = document.getElementsByClassName("action");
            for(var i = 0; i < lis.length; i++){
                lis[i].index = i;
                lis[i].onclick = function(){
                    for(var j = 0; j < lis.length; j++){
                    lis[j].id = "";
                    con[j].id = "";
                }
                    this.id = "active";
                    con[this.index].id = "play"
                }
            }
        </script>
    </html>
  • 相关阅读:
    Sokect简单入门(1)TCP协议一
    Tomcat内存溢出 解决方法
    服务器配置 ssl 证书,Nginx配置
    优秀的博客文章记录
    SpringBoot实现优雅的关机
    关于 redis 的 数据类型 和 内存模型
    微信, qq 支付宝 等相关开发 资源 记录
    设计模式 之 单列设计模式
    Swagger
    MQ服务器奔溃解决过程
  • 原文地址:https://www.cnblogs.com/tarantino/p/8795270.html
Copyright © 2011-2022 走看看