兼容所有浏览器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>页签</title>
<style type="text/css">
body { margin:0padding:0font-size:12pxfont-family:Verdana, Geneva, sans-serif}
.tab_all { width:800pxheight:automargin:0 automargin-top:50px}
.tab_menu { width:800pxheight:30px}
.tab_menu ul{ list-style:nonemargin:0padding:0width:800pxheight:30px}
.tab_menu li{ width:100pxheight:30pxfloat:leftmargin-right:5pxcursor:pointercolor:#FFFfont-weight:boldtext-align:centerline-height:30px}
.tab_menu li:hover {width:100pxheight:30pxbackground-color:#F93float:leftmargin-right:5px}
.tab_menu_li1{ background-color:#F93}
.tab_menu_li2{background-color:#F00}
.tab_txt { width:798pxheight:500px background-color: #F93}
</style>
<script language="javascript" type="text/javascript">
function oc(ii)
{
var alldivTitle = document.getElementById("alltitle").getElementsByTagName("li")
var alldiv = document.getElementById("all").getElementsByTagName("div")
for (var i = 0i <alldiv.lengthi ++)
{
if ((i + 1) == parseInt(ii))
{
alldivTitle[i].className = "tab_menu_li1"
alldiv[i].style.display = "block"
}
else
{
alldivTitle[i].className = "tab_menu_li2"
alldiv[i].style.display = "none"
}
}
}
</script>
</head>
<body>
<div class="tab_all">
<div class="tab_menu">
<ul id="alltitle">
<li class="tab_menu_li1" onclick="oc(1)">1</li>
<li class="tab_menu_li2" onclick="oc(2)">2</li>
<li class="tab_menu_li2" onclick="oc(3)">3</li>
<li class="tab_menu_li2" onclick="oc(4)">4</li>
<li class="tab_menu_li2" onclick="oc(5)">5</li>
</ul>
</div>
<div id="all">
<div class="tab_txt" style="display:block">1111111111111111111111</div>
<div class="tab_txt" style="display:none">22222222222222222222222</div>
<div class="tab_txt" style="display:none">3333333333333333333333333</div>
<div class="tab_txt" style="display:none">44444444444444444444444444</div>
<div class="tab_txt" style="display:none">555555555555555555555555</div>
</div>
</div>
</body>
</html>
祝你成功！
应该是Java过滤器引发的异常，参考以下分析和解决方法：打开Chrome的开发者工具，点击查看Sources页签，可以发下仅加载了一个html文件，而html中所引用的css，js文件都没有加载出来。
而打开html的源码，可以发下报错的第一行，只是一个html的文档类型说明：
<!doctype html>
这个错误有点莫名其妙，而且接下来的错误$未定义，明显是jQuery的js未加载执行。
在html这个报错上纠结了一会之后，发现应该不是这里的原因，通过GoogleResource interpreted as Stylesheet but transferred with MIME type text/html 这个错误，找到了原因，是因为我写了一个Filter，未将该页面配置为不进行拦截，导致所有的资源文件都被拦截，最终出现了如上所述的错误。
通过修改Filter的配置文件，将本页面相关的资源跳过，再次访问就没有问题了。
分析原因，应该是Chrome去服务器拉取资源时，被Filter拦截了请求，未能获取到资源，从而导致了上面所说的比较诡异的错误。
分析如下1、你的电脑是 是不是装了什么 主题之类的 有时候有影响 我之前就是的
2、检查浏览器是不是有问题 或者用别的浏览器 调试一下
3、考虑一下CSS代码的 兼容性问题 长贰拜荷之沽瓣泰抱骏CSS在各个浏览器的解析不一样
我推荐 使用 火狐 和 IE各版本兼容器(包含 IE5 IE6 IE7 IE8 必须装IE8才可以) 然后调试一下
