TAB内容跟随标签切换的实现的三种方式

闲着无聊,总结一下tab标签切换的常用方式,各有利弊吧,我更喜欢jquery的方式实现,比较原生js写起来太吃力了,等会还要总结一下原生js操作class属性的方法,先看这篇吧:三种方式实现tab标签内容切换!

1.CSS实现TAB标签切换

实现方法：a链接+锚点+父级盒子固定高度，溢出隐藏；

代码：

<style type="text/css">
.tab{width: 300px;height: 40px;line-height: 40px;font-size: 16px;}
.tabcton{height:300px;width: 300px;overflow: hidden;}
.item{width: 300px;height: 300px;}
.bg66{background: #666;}
</style>
<div class="tab text-center">
  <div class="col3"><a href="#o">TAB1</a></div>
  <div class="col3"><a href="#t">TAB2</a></div>
  <div class="col3"><a href="#tr">TAB3</a></div>
</div>
<div class="tabcton">
  <div class="item bg00" id="o">
1
  </div>
  <div class="item bg66" id="t">
2
  </div>
  <div class="item bg789" id="tr">
3
  </div>
</div>

效果：

CSS实现tab不足之处：1.无法添加动画，切换状态僵硬；2.盒子高度不能自动撑，只能写死高度

2.原生js实现TAB标签切换

代码：

<style type="text/css">
.bg66{background: #666;} .bg88{background: #888;} 
.tab{width: 300px;height: 40px;line-height: 40px;font-size: 16px;cursor: pointer;}
.tabcton{height:auto;width: 300px;}
.item{width: 300px;height: 300px;}
.active{background: #f5f5f5;color: blue;}
</style>
<div class="tab text-center">
  <div class="col3 active">TAB1</div>
  <div class="col3">TAB2</div>
  <div class="col3">TAB3</div>
</div>
<div class="tabcton">
  <div class="item bg66">
1
  </div>
  <div class="item bg88 hide" style="height: 100px;">
2
  </div>
  <div class="item bg789 hide" style="height: 500px;">
3
  </div>
</div>
<script type="text/javascript">
  var item = document.getElementsByClassName("item");
  var col3 =  document.getElementsByClassName("col3");
  for(var i = 0;i<col3.length;i++){
col3[i].index = i;
col3[i].onclick = function(){
  for(var j =0 ;j<col3.length;j++){
var cla = col3[j].getAttribute("class");
let newClass = cla.replace("active","");
col3[j].setAttribute("class",newClass);
  }
  this.className = "col3 active";
  for (var n = 0;n<item.length;n++) {
item[n].style.display = "none";
  }
  item[this.index].style.display = "block"
}
  }
</script>

效果：

3.jquery实现TAB标签切换

html代码一样，js代码：

<script type="text/javascript">
$(".tab .col3").click(function(){
$(this).addClass("active").siblings().removeClass("active");
var index = $(this).index();
$(".tabcton").children(".item").eq(index).siblings().hide();
$(".tabcton").children(".item").eq(index).slideDown(200); // 下落
//$(".tabcton").children(".item").eq(index).fadeIn(200); //渐隐
}) 
</script>

效果：

很明显,js和jquery弥补了css的不足,jquery的方式需要引入jquery插件,如果你网站本来就有jquery插件,当我没说