谁能帮我找找这段代码中存在的问题,现在显示TAB1时正常显示其他的时候就不行,估计CSS有问题,谢谢关注!
1. tabs.js:
// TABS JavaScript
function showtab(m,n,count){
for(var i=1;i <=count;i++){
if (i!=n){
getObject( 'tab_ '+m+ '_ '+i).style.display= 'none ';
getObject( 'a_ '+m+ '_ '+i).style.background = '#fff ';
getObject( 'a_ '+m+ '_ '+i).style.padding = '2px 8px 2px 8px ';
}
else {
getObject( 'tab_ '+m+ '_ '+i).style.display= 'block ';
getObject( 'a_ '+m+ '_ '+i).style.background = '#f1f1f1 ';
getObject( 'a_ '+m+ '_ '+i).style.padding = '2px 8px 3px 8px ';
}
}
} // showtab;
//多浏览器对象方法
function getObject(objectId) {
if(document.getElementById && document.getElementById(objectId)) {
// W3C DOM
return document.getElementById(objectId);
} else if (document.all && document.all(objectId)) {
// MSIE 4 DOM
return document.all(objectId);
} else if (document.layers && document.layers[objectId]) {
// NN 4 DOM.. note: this won 't find nested layers
return document.layers[objectId];
} else {
return false;
}
} // getObject
2. tabs.css:
/* TABS CSS */
.mytab{
float: left;
padding: 0;
margin: 0;
width: 98%;
text-align: left;
}
.mytab .tabs{
float: left;
width: 100%;
margin: 0;
padding: 0 2px 0 0 ;
list-style: none;
background: #fff url(img/nav_bg.gif) repeat-x bottom left;
font-size: 76%;
border-bottom: none;
}
.mytab .tabs li{
float: left;
margin: 0;
padding: 0;
width: auto;
}
.mytab .tabs a{
float: left;
display: block;
margin: 0 1px 0 0;
padding: 2px 8px;
color: #333;
text-decoration: none;
border: 1px solid #d2d2d2;
border-bottom: none;
background: #fff;
}
.mytab .tabs a:hover , body .mytab .up a{
color: #333;
padding-bottom: 3px;
border-color: #d2d2d2;
background: #f1f1f1;
}
.mytab .tabs a.no_style{
float: right;
display: block;
margin: 0;
padding: 4px 6px 0 6px;
color: #333;
text-decoration: none;
border: none;
background: #fff;
font-size: 75%;
}
.mytab .tabs a:hover.no_style{
float: right;
display: block;
margin: 0;
padding: 4px 6px 0 6px;
color: #333;
text-decoration: underline;
border: none;
background: #fff;
}
.mytab .tab{
float: left;
width: 100%;
max-width: 100%;
margin: 0;
padding: 0px;
border: 1px solid #d2d2d2;
border-top: none;
background: #f1f1f1;
height: 460px;
word-break: normal;
}
.mytab .tab2{
float: left;
width: 100%;
max-width: 100%;
margin: 0;
padding: 0px;
border: 1px solid #d2d2d2;
border-top: none;
background: #f1f1f1;
height: 460px;
display: none;
word-break: normal;
}
.mytab .tab ul, .mytab .tab2 ul{
list-style: none;
padding: 3px;
margin: 0;
}
.mytab .tab li, .mytab .tab2 ul li{
padding: 2px;
margin: 0px;
}
3. tabs.htm:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN ">
<HTML>
<HEAD>
<link type= "text/css " href= "tabs.css " rel= "stylesheet " />
<script src= "js/tabs.js " type= "text/javascript "> </script>
</HEAD>
<BODY>
<!-- mytab开始-->
<div class= "mytab ">
<ul class= "tabs ">
<li class= "up "> <a href= "# " rel= "external " onMouseMove= "showtab(1,1,5); " id= "a_1_1 "> 新 闻 </a> </li>
<li> <a href= "# " rel= "external " onMouseMove= "showtab(1,2,5); " id= "a_1_2 "> 公告·通知 </a> </li>
<li> <a href= "# " rel= "external " onMouseMove= "showtab(1,3,5); " id= "a_1_3 "> 热 贴 </a> </li>
<li> <a href= "# " rel= "external " onMouseMove= "showtab(1,4,5); " id= "a_1_4 "> 我的文章 </a> </li>
<li> <a href= "# " rel= "external " onMouseMove= "showtab(1,5,5); " id= "a_1_5 "> 便民手册 </a> </li>
<a href= "# " rel= "external " class= "no_style " title= "返回以前版本 "> 显示以前版本 </a>
</ul>
<!-- 最新要闻开始 -->
<div id= "tab_1_1 " class= "tab ">
<ul>
<li> 1.常见问题 </li>
<li> 怎样才是符合web标准? </li>
<li> 简单说就是不用HTML+table来设计页面，改用XHTML+CSS来实现。 </li>
<li> 怎样是代码校验? </li>
<li> 代码校验就是检查你制作好的页面是否完全符合web标准。通常可以到W3C的网站去校验。 </li>
<li> 什么是DocType,有什么用? </li>
<li> DOCTYPE是document type(文档类型)的简写，用来说明你的网页是什么标识语言(XHTML或者HTML)是什么版本。 </li>
</ul>
</div>
<!-- 最新要闻结束 -->
<!-- 公告·通知开始 -->
<div id= "tab_1_2 " class= "tab2 ">
<ul>
<li> 2.常见问题 </li>
<li> 怎样才是符合web标准? </li>
<li> 简单说就是不用HTML+table来设计页面，改用XHTML+CSS来实现。 </li>
<li> 怎样是代码校验? </li>
<li> 代码校验就是检查你制作好的页面是否完全符合web标准。通常可以到W3C的网站去校验。 </li>
<li> 什么是DocType,有什么用? </li>
<li> DOCTYPE是document type(文档类型)的简写，用来说明你的网页是什么标识语言(XHTML或者HTML)是什么版本。 </li>
</ul>
</div>
<!-- 公告通知结束 -->
<!-- 统计分析开始 -->
<div id= "tab_1_3 " class= "tab2 ">
<ul>
<li> 3.常见问题 </li>
<li> 怎样才是符合web标准? </li>
<li> 简单说就是不用HTML+table来设计页面，改用XHTML+CSS来实现。 </li>
<li> 怎样是代码校验? </li>
<li> 代码校验就是检查你制作好的页面是否完全符合web标准。通常可以到W3C的网站去校验。 </li>
<li> 什么是DocType,有什么用? </li>
<li> DOCTYPE是document type(文档类型)的简写，用来说明你的网页是什么标识语言(XHTML或者HTML)是什么版本。 </li>
</ul>
</div>
<!-- 统计分析结束 -->
<!-- 我的文章开始 -->
<div id= "tab_1_4 " class= "tab2 ">
文章
</div>
<!-- 我的文章结束 -->
<!-- 便民手册开始 -->
<div id= "tab_1_5 " class= "tab2 ">
便民
</div>
<!-- 便民手册结束 -->
</div>
<!-- mytab 结束 -->
</BODY>
</HTML>
[解决办法]
去掉了 float
.mytab .tab2{
width: 100%;
max-width: 100%;
margin: 0;
padding: 0px;
border: 1px solid #d2d2d2;
border-top: none;
background: #f1f1f1;
height: 460px;
display: none;
word-break: normal;
}
[解决办法]
第二第三个tab里不用ul就正常了。
