<head>
<style>
.lf{
float:left;
}
.tabTabsDiv {
padding: 20px 20px 0 20px;
background-color: #fff;
}
.tabTabs {
border-radius: 3px;
margin: 6px 0;
}
.tabTabs td {
padding: 0;
height: 24px;
border: 1px solid #d7dde4;
border-right:0;
border-radius: 3px;
}
.tabTabs td span{
cursor: pointer;
float:left;
padding: 0 12px;
height: 24px;
line-height:24px;
border-right:1px solid #d7dde4;
background-color: #ffffff;
}
.tabTabs td span:hover {
background-color: #3475c1;
color: #fff;
cursor: pointer;
}
.tabTabs td .on {
cursor: pointer;
background: #2f6099 none;
color: #fff;
}
</style>
</head>
// method show div, hide div
function ChangeDiv(divIndex, divName, zDivCount) {for (var i = 0; i < zDivCount; i++) {
// hide all layers
document.getElementById(divName + i).style.display = "none";
}
// Display the current layer
document.getElementById(divName + divIndex).style.display = "block";
}
// toggle button
$('.tdTab').on('click', function() {
$(this).addClass("on").siblings().removeClass("on");
});
$( '.tabDiv_tab td .tdTab').bind('click', function() {
var tdIndex = $(this).index();// Get the index value of the current click td
var zDivCount = $('.tabDiv_tab td . tdTab').length;// Get the length of td from zero
ChangeDiv(tdIndex, 'divShow_', zDivCount);// Call the function, click to switch the div to show and hide
});
<body>
<div style="width: 100%; text-align: center;">
<table cellpadding="0" cellspacing="0" border="0" class="tabDiv_tab tabTabs"
style="border-collapse: collapse; margin: 0 auto; margin-top: 36px;">
<tr>
<td>
<span class="lf tdTab on" style="width: auto;">
汇总 </span><span class="lf tdTab" style="width: auto;">远传表 </span><span class="lf tdTab" style="width: auto;">单费率水表 </span><span class="lf tdTab" style="width: auto;">复费率水表 </span><span class="lf tdTab" style="width: auto;"></td></tr></table></div><div style="clear:both;"></div>
<div id="divShow_0">
this is first div
</div>
<div id="divShow_1">
this is second div
</div>
<div id="divShow_2">
this is third div
</div>
</body>