js tab 切换

<script type="text/javascript">

function g(o){return document.getElementById(o);}

function HoverLi(n,m,q,p){

for(var i=1;i<=m;i++)

{

g(q+i).className='normaltab';

g(p+i).className='hide';

}

g(p+n).className='nohide';

g(q+n).className='hot';

}

</script>

 

<div class="tabs_header">

<ul class="tabs">

<li id="tb_1" class="hot" onclick="HoverLi(1,4,'tb_','in_')"><a href="#"><span>水生活</span></a></li>

<li id="tb_2" onclick="HoverLi(2,4,'tb_','in_')"><a href="#"><span>烤面包文化</span></a></li>

<li id="tb_3" onclick="HoverLi(3,4,'tb_','in_')"><a href="#"><span>蒸美味</span></a></li>

<li id="tb_4" onclick="HoverLi(4,4,'tb_','in_')"><a href="#"><span>妈妈宝</span></a></li>

</ul>

</div>

<div class="in">

<div class="nohide" id="in_1">

内容1

</div>

<div class="hide" id="in_2">

内容2

</div>

<div class="hide" id="in_3">

内容3

</div>

<div class="hide" id="in_4">

内容4

</div>

</div>