用选项卡写一个简单的页面！

最新推荐文章于 2024-01-24 12:19:34 发布

原创最新推荐文章于 2024-01-24 12:19:34 发布 · 254 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

本文展示了一个使用HTML和CSS创建的简单选项卡页面设计实例，通过JavaScript实现了动态切换不同类别的小说显示效果。

用选项卡写一个简单的页面，直接来看代码。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
           a{display:inline-block;width:180px;height:45px;text-decoration:none;text-align:center;line-height:45px;color:black;background:deepskyblue;}
           div{width:1084px;height:530px;padding:10px;color:#666;background:pink;display: none;}
           .click{background:blueviolet;color:white;}
           span{display:block;width:158px;height:240px;border:1px solid deeppink;background:hotpink;float:left;text-align:center;line-height:240px;margin:10px;}
        </style>
    </head>
    <body>
        <a href="##" class="click">武侠仙侠</a>
        <a href="##">都市娱乐</a>
        <a href="##">竞技同人</a>
        <a href="##">科幻游戏</a>
        <a href="##">二次元</a>
        <a href="##">花语女生</a>
        <div style="display: block;">
        	<span>小说一</span><span>小说一</span><span>小说一</span><span>小说一</span>
        	<span>小说一</span><span>小说一</span><span>小说一</span><span>小说一</span>
        	<span>小说一</span><span>小说一</span><span>小说一</span><span>小说一</span>
        </div>
        <div>
        	<span>小说二</span><span>小说二</span><span>小说二</span><span>小说二</span>
        	<span>小说二</span><span>小说二</span><span>小说二</span><span>小说二</span>
        	<span>小说二</span><span>小说二</span><span>小说二</span><span>小说二</span>
        </div>
        <div>
        	<span>小说三</span><span>小说三</span><span>小说三</span><span>小说三</span>
        	<span>小说三</span><span>小说三</span><span>小说三</span><span>小说三</span>
        	<span>小说三</span><span>小说三</span><span>小说三</span><span>小说三</span>
        </div>
        <div>
        	<span>小说四</span><span>小说四</span><span>小说四</span><span>小说四</span>
        	<span>小说四</span><span>小说四</span><span>小说四</span><span>小说四</span>
        	<span>小说四</span><span>小说四</span><span>小说四</span><span>小说四</span>
        </div>
        <div>
        	<span>小说五</span><span>小说五</span><span>小说五</span><span>小说五</span>
        	<span>小说五</span><span>小说五</span><span>小说五</span><span>小说五</span>
        	<span>小说五</span><span>小说五</span><span>小说五</span><span>小说五</span>
        </div>
        <div>
        	<span>小说六</span><span>小说六</span><span>小说六</span><span>小说六</span>
        	<span>小说六</span><span>小说六</span><span>小说六</span><span>小说六</span>
        	<span>小说六</span><span>小说六</span><span>小说六</span><span>小说六</span>
        </div>
      <script>
        var oa=document.getElementsByTagName("a"),
            odiv=document.getElementsByTagName("div");
        for(var i=0;i<oa.length;i++){
            oa[i].index=i;
            oa[i].onclick=function (){
                for(var j=0;j<oa.length;j++){
                    oa[j].className="";
                    odiv[j].style.display="none";
                }             
                this.className="click";
                odiv[this.index].style.display="block";
            }
        }
      </script>
    </body>
</html>

运行截图01 运行截图02
有什么不懂的可以留言，评论交流。