每日一点前端-3-简易选项卡

墨蓝 2021-06-24 16:11 414阅读 0赞

界面显示：

![2789632-56d16c6c6a4ea751.png][]

新闻选项列

![2789632-81ec950daeed0100.png][]

图片选项列

贴上代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
    http://www.w3.org/TR/html4/loose.dtd">
    <html>
        <head>
            <meta http-equiv="content-type" content="text/html;charset=utf-8" />
            <meta name="keywords" content="关键词1,关键词2,关键词3" />
            <meta name="description" content="对网站的描述" />
            <title>标题</title>
            <style type="text/css">
                *{
                    margin:0;
                    padding:0;
                }
                 #box{
                    margin: 150px;
                    width: 310px;
                    height: 263px;
                 }
                 #box .hd{
                    height: 30px;
                    border-top: 2px solid #206F96;
                    text-align: center;
                    font: 14px/30px "宋体";
                 }
                 #box  .hd .s1{
                    width: 102px;
                    height: 29px;
                    border-left:1px solid #CFCFCF;
                    border-right: 1px solid #CFCFCF;
                    float: left;
                 }
                 #box  .hd .s2{
                    width: 102px;
                    height: 29px;
                    border-right: 1px solid #CFCFCF;
                    border-bottom: 1px solid #CFCFCF;
                    background:url(images/1.jpg) repeat-x;
                    float: left;
                 }
                  #box  .hd .s3{
                    width: 102px;
                    height: 29px;
                    border-right: 1px solid #CFCFCF;
                    border-bottom: 1px solid #CFCFCF;
                    background:url(images/1.jpg) repeat-x;
                    float: left;
                 }
                 #box .bd ul{
                    list-style: none;
                 }
                  #box .bd ul li{
                    line-height: 30px;
                  }
                  #box .bd ul li a:link,#box .bd ul li a:visited{
                    text-decoration: none;
                    color: #666;
                    font-size: 14px;
                  }
                  #tupian,#junshi{
                    display: none;
                  }
            </style>
            <script type="text/javascript">
                function xianshitupian(){
                    //让图片列表显示出来
                    document.getElementById("tupian").style.display = "block";
                    //让新闻列表隐藏
                    document.getElementById("xinwen").style.display = "none";
                    //让军事列表隐藏
                    document.getElementById("junshi").style.display = "none";
    
                    //让图片span去掉背景
                    document.getElementById("span_tupian").style.background = "none";
                    //让新闻span加上灰色背景
                    document.getElementById("span_xinwen").style.background = "url(images/1.jpg) repeat-x";
                    //让军事span加上灰色背景
                    document.getElementById("span_junshi").style.background = "url(images/1.jpg) repeat-x";
    
                    //让图片span去掉下边框线
                    document.getElementById("span_tupian").style.borderBottom = "none";
                    //让新闻span加上下边框线
                    document.getElementById("span_xinwen").style.borderBottom = "1px solid #CFCFCF";
                    //让军事span加上下边框线
                    document.getElementById("span_junshi").style.borderBottom = "1px solid #CFCFCF";
                }
    
                function xianshixinwen(){
                    //让新闻列表显示出来
                    document.getElementById("xinwen").style.display = "block";
                    //让图片列表隐藏
                    document.getElementById("tupian").style.display = "none";
                    //让军事列表隐藏
                    document.getElementById("junshi").style.display = "none";
    
                    //让新闻span去掉背景
                    document.getElementById("span_xinwen").style.background = "none";
                    //让图片span加上灰色背景
                    document.getElementById("span_tupian").style.background = "url(images/1.jpg) repeat-x";
                    //让军事span加上灰色背景
                    document.getElementById("span_junshi").style.background = "url(images/1.jpg) repeat-x";
    
                    //让新闻span去掉下边框线
                    document.getElementById("span_xinwen").style.borderBottom = "none";
                    //让图片span加上下边框线
                    document.getElementById("span_tupian").style.borderBottom = "1px solid #CFCFCF";
                    //让军事span加上下边框线
                    document.getElementById("span_junshi").style.borderBottom = "1px solid #CFCFCF";
                }
    
                function xianshijunshi(){
                    //让军事列表显示出来
                    document.getElementById("junshi").style.display = "block";
                    //让图片列表隐藏
                    document.getElementById("tupian").style.display = "none";
                    //让新闻列表隐藏
                    document.getElementById("xinwen").style.display = "none";
    
                    //让军事span去掉背景
                    document.getElementById("span_junshi").style.background = "none";
                    //让图片span加上灰色背景
                    document.getElementById("span_tupian").style.background = "url(images/1.jpg) repeat-x";
                    //让新闻span加上灰色背景
                    document.getElementById("span_xinwen").style.background = "url(images/1.jpg) repeat-x";
    
                    //让军事span去掉下边框线
                    document.getElementById("span_junshi").style.borderBottom = "none";
                    //让图片span加上下边框线
                    document.getElementById("span_tupian").style.borderBottom = "1px solid #CFCFCF";
                    //让新闻span加上下边框线
                    document.getElementById("span_xinwen").style.borderBottom = "1px solid #CFCFCF";
                }
            </script>
        </head>
        <body>
             <div id="box">
                <div class="hd">
                    <span id="span_xinwen" class="s1" onmouseover="xianshixinwen()">新闻</span>
                    <span id="span_tupian" class="s2" onmouseover="xianshitupian()">图片</span>
                    <span id="span_junshi" class="s3" onmouseover="xianshijunshi()">军事</span>
                </div>
                <div class="bd">
                    <div id="xinwen" class="info">
                        <ul>    
                            <li><a href="#">新闻新闻新闻新闻新闻新闻新闻新闻</a></li>
                            <li><a href="#">新闻新闻新闻新闻新闻新闻新闻新闻</a></li>
                            <li><a href="#">新闻新闻新闻新闻新闻新闻新闻新闻</a></li>
                            <li><a href="#">新闻新闻新闻新闻新闻新闻新闻新闻</a></li>
                            <li><a href="#">新闻新闻新闻新闻新闻新闻新闻新闻</a></li>
                            <li><a href="#">新闻新闻新闻新闻新闻新闻新闻新闻</a></li>
                            <li><a href="#">新闻新闻新闻新闻新闻新闻新闻新闻</a></li>
                        </ul>
                    </div>
                    <div id="tupian" class="info">
                        <ul>    
                            <li><a href="#">图片图片图片图片图片图片图片图片</a></li>
                            <li><a href="#">图片图片图片图片图片图片图片图片</a></li>
                            <li><a href="#">图片图片图片图片图片图片图片图片</a></li>
                            <li><a href="#">图片图片图片图片图片图片图片图片</a></li>
                            <li><a href="#">图片图片图片图片图片图片图片图片</a></li>
                            <li><a href="#">图片图片图片图片图片图片图片图片</a></li>
                            <li><a href="#">图片图片图片图片图片图片图片图片</a></li>
                            <li><a href="#">图片图片图片图片图片图片图片图片</a></li>
                        </ul>
                    </div>
                    <div id="junshi" class="info">
                        <ul>    
                            <li><a href="#">军事军事军事军事军事军事军事军事</a></li>
                            <li><a href="#">军事军事军事军事军事军事军事军事</a></li>
                            <li><a href="#">军事军事军事军事军事军事军事军事</a></li>
                            <li><a href="#">军事军事军事军事军事军事军事军事</a></li>
                            <li><a href="#">军事军事军事军事军事军事军事军事</a></li>
                            <li><a href="#">军事军事军事军事军事军事军事军事</a></li>
                            <li><a href="#">军事军事军事军事军事军事军事军事</a></li>
                            <li><a href="#">军事军事军事军事军事军事军事军事</a></li>
                        </ul>
                    </div>
                </div>
             </div>
        </body>
    </html>

![2789632-3b18269684ea9294.png][]

公众号.png

[2789632-56d16c6c6a4ea751.png]: /images/20210615/f2f8b8b744a9489dbf84f89465bc8afd.png
[2789632-81ec950daeed0100.png]: /images/20210615/60f1e973ab874dcfbeeca64309d8ed54.png
[2789632-3b18269684ea9294.png]: /images/20210615/05806d82609e4038ab58628619659220.png