首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

求JS 高手解决个TAB 的有关问题!

2013-12-28 
求JS 高手解决个TAB 的问题!!!本来应该正常的效果图是这样的!!!。 但是新打开网页,或是一刷新之后就会变成

求JS 高手解决个TAB 的问题!!!
本来应该正常的效果图是这样的!!!  。 
求JS 高手解决个TAB 的有关问题!
但是新打开网页,或是一刷新之后就会变成这样了!!

求JS 高手解决个TAB 的有关问题!

然后鼠标移动到 某个标题上之后就会变得正常
求JS 高手解决个TAB 的有关问题!
刷新之后问题 又出现了 第二张图片的问题 


这个一般是什么原因引起的啊 。知道的可以告诉下吗!!!!



在单页面上刷新好像是正常的。但是一放到DZ的模板上就出现了以上的问题!!!!


<!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/html; charset=gb2312" />
<meta name="keywords" content="JS代码,TAB标签,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为可暂定滚动的TAB标签代码,属于站长常用代码,更多TAB标签代码请访问懒人图库JS代码频道。" />
<title>可暂定滚动的TAB标签代码_懒人图库</title>

<style type="text/css">

@charset "utf-8";
/* CSS Document */

/* CSS 初始化代码 */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin:0; padding:0; }
body {color:#555; font-size:12px; font-family: Verdana, Arial, Helvetica, sans-serif; }
td,th,caption { font-size:14px; }
h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:100%; }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal;}
a { color:#555; text-decoration:none; }
a:hover { text-decoration:none; color:#CCC; }
img { border:none; }
img:hover {filter: alpha(opacity=70); opacity:0.7;}
ol,ul,li { list-style:none; }
input, textarea, select, button { font:14px Verdana,Helvetica,Arial,sans-serif; }
table { border-collapse:collapse; }
html {overflow-y: scroll;}
/* css common */
.clearfix:after {content: "."; display: block; height:0; clear:both; visibility: hidden;}
.clearfix { *zoom:1; }
/* CSS 初始化结束 */



/*Example for a Menu Style*/
.menu {border-bottom:1px solid #d7d7d7; height:23px;width:354px; overflow:hidden;}
.menu ul {margin:0px; padding:0px; list-style:none; text-align:center; }
.menu li {display:inline; line-height:23px; }
.menu li a { text-decoration:none;  width:118px; float:left; color:#000; }
.menu li a.tabactive { color:#FFF; background-color:#CCC;;  position:relative; font-size:14px;}
#tabcontent1,#tabcontent2,#tabcontent3,#tabcontent4,#anothercontent1,#anothercontent2, #anothercontent3 { width:352px;  font-size:12px; margin-top:7px; background:url(../../../www/ash/images/lite-lb.png) no-repeat; height:248px;}
.litelb ul li{width:325px; float:left; height:18px; margin-left:25px; margin-bottom:4px; padding-top:3px;}
.litelb ul li span {float:right; color:#CCC;}
</style>


<script type="text/javascript">
/*
EASY TABS 1.2 Produced and Copyright by Koller Juergen
www.kollermedia.at | www.austria-media.at
Need Help? http:/www.kollermedia.at/archive/2007/07/10/easy-tabs-12-now-with-autochange
You can use this Script for private and commercial Projects, but just leave the two credit lines, thank you.
*/

//EASY TABS 1.2 - MENU SETTINGS
//Set the id names of your tablinks (without a number at the end)
var tablink_idname = new Array("tablink","anotherlink")
//Set the id names of your tabcontentareas (without a number at the end)
var tabcontent_idname = new Array("tabcontent","anothercontent") 
//Set the number of your tabs in each menu
var tabcount = new Array("3","6")
//Set the Tabs wich should load at start (In this Example:Menu 1 -> Tab 2 visible on load, Menu 2 -> Tab 5 visible on load)
var loadtabs = new Array("1","5")  
//Set the Number of the Menu which should autochange (if you dont't want to have a change menu set it to 0)
var autochangemenu = 2;
//the speed in seconds when the tabs should change
var changespeed = 3;
//should the autochange stop if the user hover over a tab from the autochangemenu? 0=no 1=yes
var stoponhover = 0;
//END MENU SETTINGS


/*Swich EasyTabs Functions - no need to edit something here*/


function easytabs(menunr, active) {if (menunr == autochangemenu){currenttab=active;}if ((menunr == autochangemenu)&&(stoponhover==1)) {stop_autochange()} else if ((menunr == autochangemenu)&&(stoponhover==0))  {counter=0;} menunr = menunr-1;for (i=1; i <= tabcount[menunr]; i++){document.getElementById(tablink_idname[menunr]+i).className='tab'+i;document.getElementById(tabcontent_idname[menunr]+i).style.display = 'none';}document.getElementById(tablink_idname[menunr]+active).className='tab'+active+' tabactive';document.getElementById(tabcontent_idname[menunr]+active).style.display = 'block';}var timer; counter=0; var totaltabs=tabcount[autochangemenu-1];var currenttab=loadtabs[autochangemenu-1];function start_autochange(){counter=counter+1;timer=setTimeout("start_autochange()",1000);if (counter == changespeed+1) {currenttab++;if (currenttab>totaltabs) {currenttab=1}easytabs(autochangemenu,currenttab);restart_autochange();}}function restart_autochange(){clearTimeout(timer);counter=0;start_autochange();}function stop_autochange(){clearTimeout(timer);counter=0;}

window.onload=function(){
var menucount=loadtabs.length; var a = 0; var b = 1; do {easytabs(b, loadtabs[a]);  a++; b++;}while (b<=menucount);
if (autochangemenu!=0){start_autochange();}
}
</script>
</head>


<body>

<div class="menu">
<ul>
<li><a href="#" onmouseover="easytabs('1', '1');" onfocus="easytabs('1', '1');" onclick="return false;"  title="" id="tablink1">最新发表</a></li>
<li><a href="#" onmouseover="easytabs('1', '2');" onfocus="easytabs('1', '2');" onclick="return false;"  title="" id="tablink2">周排行榜 </a></li>
<li><a href="#" onmouseover="easytabs('1', '3');" onfocus="easytabs('1', '3');" onclick="return false;"  title="" id="tablink3">月排行榜 </a></li>

</ul>
</div>
<!--End of the Tabmenu 1 -->


<!--Start Tabcontent 1 -->
<div id="tabcontent1" class="litelb"><ul><li> 做女生精彩不停 不要浪费青春哦 <span>admin</span></li></ul></div>
<!--End Tabcontent 1-->

<!--Start Tabcontent 2-->
<div id="tabcontent2" class="litelb"><ul><li> 做女生精彩不停 不要浪费青春哦2 <span>admin</span></li></ul></div>
<!--End Tabcontent 2 -->

<!--Start Tabcontent 3-->
<div id="tabcontent3" class="litelb"><ul><li> 做女生精彩不停 不要浪费青春哦3 <span>admin</span></li></ul></div>
<!--End Tabcontent 3-->




</body>
</html>



[解决办法]
刷新时  把另外的div先设为隐藏
[解决办法]
引用:
Quote: 引用:

刷新的时候没有默认调用哪个tab,所以tab没有选中,三个div当然全部显示出来了


哪段代码 是显示刷新的时候显示哪个TAB的啊 。。可以复制出来看看嘛。 我看看怎么修改!

window.onload=function(){
var menucount=loadtabs.length; var a = 0; var b = 1; do {easytabs(b, loadtabs[a]);  a++; b++;}while (b<=menucount);
if (autochangemenu!=0){start_autochange();}
}
你的这段代码
[解决办法]
设置初始div display=none
[解决办法]
我这里正常 楼主用的什么浏览器
[解决办法]
引用:
Quote: 引用:

Quote: 引用:

Quote: 引用:

刷新的时候没有默认调用哪个tab,所以tab没有选中,三个div当然全部显示出来了


哪段代码 是显示刷新的时候显示哪个TAB的啊 。。可以复制出来看看嘛。 我看看怎么修改!

window.onload=function(){
var menucount=loadtabs.length; var a = 0; var b = 1; do {easytabs(b, loadtabs[a]);  a++; b++;}while (b<=menucount);
if (autochangemenu!=0){start_autochange();}
}
你的这段代码




有修改方法吗!


刷新的时候这段代码应该没走,debug一下看看具体那句,也有可能是你的浏览器原因..
[解决办法]
扫了一眼问题描述,很明显是由于初始化时没有设置其他的样式引起的
加载页面后,调用一次:easytabs('1', '1');使其初始化显示第一列内容

热点排行