前端开发软件ide|
tab切换，做前端的各位大神再熟悉不过，因为运用的场合太多，所以大家可能都不屑于去关心了。不晓得大家遇到这种时是自己马上梳理逻辑写一次呢，还是用已有的模板或自己的库，今天我对自己遇到的情况做了一下总结,对以下几点做了优化。
a，三个写法可根据具体页面使用环境而选择。
b，结构层、表现层、行为层的分离
c，结构层标签选择不受限。
d，对函数传参以避免一个页面多个tab切换行为与样式的相互干扰
1，调用JQ库
**结构层：**
…按钮 >包含标签>
…按钮 >包含标签>
按钮容器>
…内容标签>
…内容标签>
内容容器 >
容器 >
行为层：
tab_switch1(容器id,焦点菜单class);
/p>
<
tab选项卡的不同写法
body,
div,
ul,
li {
margin: 0;
padding: 0;
list-style: none;
font: 14px/30px arial, “微软雅黑”;
}
a {
text-decoration: none;
}
.tab_a {
width: 600px;
height: auto;
margin: 20px auto;
}
.tab_a .tab1ys {
width: 100%;
height: 50px;
}
.tab_a .tab1ys li {
width: 200px;
float: left;
}
.tab_a .tab1ys li a {
width: 100%;
height: 100%;
border: 1px solid #666;
border-right: none;
line-height: 50px;
font-size: 14px;
color: #000;
text-align: center;
display: block
}
.tab_a .tab1ys li:last-child a {
border-right: 1px solid #666;
}
.tab_a .tab1ys li a.active {
background: #333;
color: #CCC;
}
.tab_a .tabcon_sy {
width: 100%;
height: 300px;
border: 1px solid #666;
border-top: none;
overflow: hidden;
}
.tab_a .tabcon_sy li {
width: 94%;
height: 100%;
padding: 15px 3%;
}
.hidden {
display: none;
}
选项卡1
选项卡2
选项卡3
选项卡1的内容 选项卡2的内容 选项卡3的内容
function tab_switch1(ele_id, activeclass) {
$(“#” + ele_id + “>.tab1”).children().each(function () {
var xh = $(this).index();
$(this).find(“*”).click(function () {
$(this).addClass(activeclass);
$(this).parent().siblings().find(“*”).removeClass(activeclass);
$(“#” + ele_id + “>.tab_con”).find(“*”).addClass(“hidden”);
//alert(xh);
$(“#” + ele_id + “>.tab_con”).find(“*”).eq(xh).removeClass(“hidden”);
})
});
}
//根据ID调用菜单切换函数
tab_switch1(“tab_a”, “active”);
如果觉得《tab选项卡转换html 前端开发tab选项卡切换各种解决方案》对你有帮助，请点赞、收藏，并留下你的观点哦！
