本文主要包含h5 tab,h5 tab切换,tab标签切换效果,tab标签,tab标签切换等相关知识,weiweitb8的博客希望在学习及工作中可以帮助到您
一 Tab标签切换效果的思路与实现
1.目标效果：
实现鼠标移到不同的tab标签上，下面对应的内容进行切换的效果，同时，被选中的选项卡有左右边框，无下边框，而未被选中的则存在下边框。
2.实现思路
1）点击选择的部分使用ul实现，设定好整个装标题的div的宽度，然后计算出每个标题所占的宽度，并设置文字居中即可，这里应注意留出边框的位置，比如装标题的容器宽度为300，有5个标题，那么可设置每个标题宽度为58，左右各留出1px的padding，这是为了后期的出现左右边框占位置，还应注意留出下边框的位置。
2）将第一个标题位置添加类名为select，并在css中设置选中后的样式，如设置左右边框，并将padding归零。
3）内容部分每个选项卡对应一个盒子，设置盒子内容样式，并将第一个盒子设置display为block，其余都为none。
4）js部分：当某个选项卡的鼠标事件触发后，清除所有选项卡上的类名以及设所有内容模块的display为none，并设置这一触发事件的选项卡类名为select，其对应的内容模块display为block（可在循环最开始时为每个选项卡设置id为其对应的序号，则其id号对应的也是对应显示模块的序号）。
3.代码部分：
1）js部分代码：
function $(id){
return typeof id=="string"? document.getElementById(id):id;
}
window.onload = function(){
var titleName = $("tab-title").getElementsByTagName("li");
var tabContent = $("tab-content").getElementsByTagName("div");
if(titleName.length != tabContent.length){
return;
}
for(var i = 0; i<titleName.length; i++){
titleName[i].id = i;
titleName[i].onmouseover = function () {
for(var j = 0;j<titleName.length;j++){
titleName[j].className = "";
tabContent[j].style.display = "none";
}
this.className = "select";
tabContent[this.id].style.display = "block";
}
}
}