tab选项卡转换html,前端开发tab选项卡切换各种解决方案

前端开发软件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”);