查看: 773|回复: 1

编写HTML实现标签栏切换效果

[复制链接]

24

主题

24

帖子

206

积分

电商1903班

Rank: 1

积分
206
发表于 2020-5-12 17:23:21 | 显示全部楼层 |阅读模式
代码:
<title>标签栏切换效果</title>
<style>
body,ul{margin:0;padding:0;}
ul{list-style:none;}
.tab-box{width:383px;margin:10px;border:1px solid #ccc;border-top:2px solid #206F95;}
.tab-head{height:31px;}
.tab-head-div{width:95px;height:30px;float:left;border-bottom:1px solid #ccc;border-right:1px solid #ccc;background:#206F96;Line-height:30px;text-align:center;cursor:pointer;color:#fff;}
.tab-head.current{background:#fff;border-bottom:1px solid #fff;color:#000;}
.tab-head-r{border-right:0;}
.tab-body-div{display:none;margin:20px 10px;}
.tab-body.current{display:block;}

</style>

</head>

<body>
<div class="tab-box">
  <div class="tab-head">
   <div class="tab-head-div current">标签一</div>
   <div class="tab-head-div">标签二</div>
   <div class="tab-head-div">标签三</div>
   <div class="tab-head-div">标签四</div>
</div>
<div class="tab-body">
<div class="tab-body-div current">1</div>
  <div class="tab-body-div">2</div>
  <div class="tab-body-div">3</div>
  <div class="tab-body-div">4</div>
  </div>
  </div>
</body>
</html>
<script>
var tabs = document.getElementsByClassName('tab-head-div');
var divs = document.getElementsByClassName('tab-body-div');
for (var i=0;i <tabs.length; ++i){
        tabs.onmouseover = function (){
                for (var i=0; i< divs.length;++i){
                        if (tabs ==this){
                                divs.classList.add('current');
                                tabl.classList.add('current');
                        } else {
                                divs.classList.remove('current');
                                tabs.classList.remove('current');
                        }
                }
        }
}
</script>

回复

使用道具 举报

10

主题

11

帖子

58

积分

电商1903班

Rank: 1

积分
58
发表于 2020-5-12 19:11:05 | 显示全部楼层
代码:
<title>标签栏切换效果</title>
<style>
body,ul{margin:0;padding:0;}
ul{list-style:none;}
.tab-box{width:383px;margin:10px;border:1px solid #ccc;border-top:2px solid #206F95;}
.tab-head{height:31px;}
.tab-head-div{width:95px;height:30px;float:left;border-bottom:1px solid #ccc;border-right:1px solid #ccc;background:#206F96;Line-height:30px;text-align:center;cursor:pointer;color:#fff;}
.tab-head.current{background:#fff;border-bottom:1px solid #fff;color:#000;}
.tab-head-r{border-right:0;}
.tab-body-div{display:none;margin:20px 10px;}
.tab-body.current{display:block;}

</style>

</head>

<body>
<div class="tab-box">
  <div class="tab-head">
   <div class="tab-head-div current">标签一</div>
   <div class="tab-head-div">标签二</div>
   <div class="tab-head-div">标签三</div>
   <div class="tab-head-div">标签四</div>
</div>
<div class="tab-body">
<div class="tab-body-div current">1</div>
  <div class="tab-body-div">2</div>
  <div class="tab-body-div">3</div>
  <div class="tab-body-div">4</div>
  </div>
  </div>
</body>
</html>
<script>
var tabs = document.getElementsByClassName('tab-head-div');
var divs = document.getElementsByClassName('tab-body-div');
for (var i=0;i <tabs.length; ++i){
        tabs.onmouseover = function (){
                for (var i=0; i< divs.length;++i){
                        if (tabs ==this){
                                divs.classList.add('current');
                                tabl.classList.add('current');
                        } else {
                                divs.classList.remove('current');
                                tabs.classList.remove('current');
                        }
                }
        }
}
</script>
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表