简单实用TAB选项卡，支持单页面多个调用
鼠标滑过响应类型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html;charset=gb2312" /><title>简洁Tab</title><style type="text/css"><!--body,div,ul,li{padding:0;text-align:center;}body{font:12px "宋体";text-align:center;}a:link{color:#00F;text-decoration:none;}a:visited {color: #00F;text-decoration:none;}a:hover {color: #c00;text-decoration:underline;}ul{ list-style:none;}#Tab1{width:460px;margin:0px;padding:0px;margin:0 auto;}#Tab2{width:576px;margin:0px;padding:0px;margin:0 auto;}.Menubox {width:100%;background:url(http://www.hxcgw.com/bbs/upfile/20079299441652.gif);height:28px;line-height:28px;}.Menubox ul{margin:0px;padding:0px;}.Menubox li{float:left;display:block;cursor:pointer;width:114px;text-align:center;color:#949694;font-weight:bold;}.Menubox li.hover{padding:0px;background:#fff;width:116px;border-left:1px solid #A8C29F;border-top:1px solid #A8C29F;border-right:1px solid #A8C29F;background:url(http://www.hxcgw.com/bbs/upfile/200792994426548.gif);color:#739242;font-weight:bold;height:27px;line-height:27px;}.Contentbox{clear:both;margin-top:0px;border:1px solid #A8C29F;border-top:none;height:181px;text-align:center;padding-top:8px;}--></style><script><!--function setTab(name,cursel,n){for(i=1;i<=n;i++){var menu=document.getElementById(name+i);var con=document.getElementById("con_"+name+"_"+i);menu.className=i==cursel?"hover":"";con.style.display=i==cursel?"block":"none";}}//--></script></head><body><br><br><div id="Tab1"><div class="Menubox"><ul><li id="one1" onmouseover="setTab('one',1,4)" class="hover">新闻1</li><li id="one2" onmouseover="setTab('one',2,4)" >新闻2</li><li id="one3" onmouseover="setTab('one',3,4)">新闻3</li><li id="one4" onmouseover="setTab('one',4,4)">新闻4</li></ul></div><div class="Contentbox"><div id="con_one_1" class="hover">新闻列表1</div><div id="con_one_2" style="display:none">新闻列表2</div><div id="con_one_3" style="display:none">新闻列表3</div><div id="con_one_4" style="display:none">新闻列表4</div></div></div><br><div id="Tab2"><div class="Menubox"><ul><li id="two1" onmouseover="setTab('two',1,4)" class="hover">新闻1</li><li id="two2" onmouseover="setTab('two',2,4)" >新闻2</li><li id="two3" onmouseover="setTab('two',3,4)">新闻3</li><li id="two4" onmouseover="setTab('two',4,4)">新闻4</li></ul></div><div class="Contentbox"><div id="con_two_1" >新闻列表1</div><div id="con_two_2" style="display:none">新闻列表2</div><div id="con_two_3" style="display:none">新闻列表3</div><div id="con_two_4" style="display:none">新闻列表4</div></div></div></body></html>
鼠标点击响应
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html;charset=gb2312" /><title>简洁Tab</title><style type="text/css"><!--body,div,ul,li{padding:0;text-align:center;}body{font:12px "宋体";text-align:center;}a:link{color:#00F;text-decoration:none;}a:visited {color: #00F;text-decoration:none;}a:hover {color: #c00;text-decoration:underline;}ul{ list-style:none;}#Tab1{width:460px;margin:0px;padding:0px;margin:0 auto;}#Tab2{width:576px;margin:0px;padding:0px;margin:0 auto;}.Menubox {width:100%;background:url(http://www.hxcgw.com/bbs/upfile/20079299441652.gif);height:28px;line-height:28px;}.Menubox ul{margin:0px;padding:0px;}.Menubox li{float:left;display:block;cursor:pointer;width:114px;text-align:center;color:#949694;font-weight:bold;}.Menubox li.hover{padding:0px;background:#fff;width:116px;border-left:1px solid #A8C29F;border-top:1px solid #A8C29F;border-right:1px solid #A8C29F;background:url(http://www.hxcgw.com/bbs/upfile/200792994426548.gif);color:#739242;font-weight:bold;height:27px;line-height:27px;}.Contentbox{clear:both;margin-top:0px;border:1px solid #A8C29F;border-top:none;height:181px;text-align:center;padding-top:8px;}--></style><script><!--function setTab(name,cursel,n){for(i=1;i<=n;i++){var menu=document.getElementById(name+i);var con=document.getElementById("con_"+name+"_"+i);menu.className=i==cursel?"hover":"";con.style.display=i==cursel?"block":"none";}}//--></script></head><body><br><br><div id="Tab1"><div class="Menubox"><ul><li id="one1" onclick="setTab('one',1,4)" class="hover">新闻1</li><li id="one2" onclick="setTab('one',2,4)" >新闻2</li><li id="one3" onclick="setTab('one',3,4)">新闻3</li><li id="one4" onclick="setTab('one',4,4)">新闻4</li></ul></div><div class="Contentbox"><div id="con_one_1" class="hover">新闻列表1</div><div id="con_one_2" style="display:none">新闻列表2</div><div id="con_one_3" style="display:none">新闻列表3</div><div id="con_one_4" style="display:none">新闻列表4</div></div></div><br><div id="Tab2"><div class="Menubox"><ul><li id="two1" onclick="setTab('two',1,4)" class="hover">新闻1</li><li id="two2" onclick="setTab('two',2,4)" >新闻2</li><li id="two3" onclick="setTab('two',3,4)">新闻3</li><li id="two4" onclick="setTab('two',4,4)">新闻4</li></ul></div><div class="Contentbox"><div id="con_two_1" >新闻列表1</div><div id="con_two_2" style="display:none">新闻列表2</div><div id="con_two_3" style="display:none">新闻列表3</div><div id="con_two_4" style="display:none">新闻列表4</div></div></div></body></html>