php tab页,js实现tab标签效果(多标签页切换效果)

js实现tab标签效果(多标签页切换效果)

Tab 效果

.tab {

width: 150px;

height: 60px;

border: 1px solid #aaa;

border-bottom: none;

float: left;

text-align: center;

line-height: 60px;

cursor: pointer;

}

#tab1, #page1 {

background: #faa;

}

#tab2, #page2 {

background: #afa;

}

#tab3, #page3 {

background: #aaf;

}

.tabContainer {

position: relative;

clear: both;

}

.page {

position: absolute;

width: 455px;

height: 200px;

border: 1px solid #aaa;

}

.topPage {

z-index: 1;

}

function showPage(num) {

var container = document.getElementsByClassName('tabContainer')[0];

var divlist = container.getElementsByTagName('div');

for (var i = 0; i < divlist.length; i++) {

var classNode = document.createAttribute('class');

classNode.value = 'page';

divlist[i].setAttributeNode(classNode);

}

var pageDiv = document.getElementById('page' + num);

var classNode = document.createAttribute('class');

classNode.value = 'page topPage';

pageDiv.setAttributeNode(classNode);

}

多标签页效果

10元套餐

50元套餐

100元套餐

10元套餐详情

50元套餐详情

100元套餐详情