- 爱易网页
-
JavaSript
- 页面刷新或者函数调用
日期:2014-05-16 浏览次数:20342 次
求助:页面刷新或者函数调用
我模仿microsoft主页上的Tab页做了一个HTML,http://www.microsoft.com/en/us/default.aspx , 在这个页面上,鼠标移动即可自动切换tab页。我使用微软的js和css文件,在建立tab的时候如下代码:
<div class="tabs ulTabs">
<ul>
<li class="tab tabActive" tabIndex="0" id="tbh0_0" onMouseOver="activateTab(0,0)" onMouseOut="mouseOutTab(0,0)" onfocus="KPF = 'activateTab(0,0)';" onKeyDown="return KP(event);">产品中心</li>
<li class="tab" tabIndex="0" id="tbh0_1" onMouseOver="activateTab(0,1)" onMouseOut="mouseOutTab(0,1)" onfocus="KPF = 'activateTab(0,1)';" onKeyDown="return KP(event);">解决方案</li>
<li class="tab" tabIndex="0" id="tbh0_2" onMouseOver="activateTab(0,2)" onMouseOut="mouseOutTab(0,2)" onfocus="KPF = 'activateTab(0,2)';" onKeyDown="return KP(event);">技术支持</li>
<li class="tab" tabIndex="0" id="tbh0_3" onMouseOver="activateTab(0,3)" onMouseOut="mouseOutTab(0,3)" onfocus="KPF = 'activateTab(0,3)';" onKeyDown="return KP(event);">关于我们</li>
</ul>
</div>
创建tab页面代码如下:
<div class="tbc">
<h3 class="dlh">产品中心<a name="solution"> </a></h3>
<div class="tabPanel" id="tbc0_0">
<a>产品中心</a>
</div>
</div>
<div class="tbc">
<h3 class="dlh">解决方案<a name="solution"> </a></h3>
<div class="tabPanel" id="tbc0_1">
<a>解决方案</a>
</div>
</div>
<div class="tbc">
<h3 class="dlh">技术支持<a name="support"> </a></h3>
<div class="tabPanel" id="tbc0_2">
<a>技术支持</a>
</div>
</div>
<div class="tbc">
<h3 class="dlh">关于我们<a name="about"> </a></h3>
<div class="tabPanel" id="tbc0_3">
<a>关于我们</a>
</div>
</div>
通过activetab和mouseOuttab函数感知鼠标的移动,从而切换tab页面,这两个函数代码如下:
function activateTab(tabGroup,index,IsReloadTabs){
clearTimeout(activeTabTimers[tabGroup]); // if a hover is pending, then clear it
currentTabGroup = tabGroup;
currentTabIndex = index;
if(activeTabIndeces.length <= tabGroup){
activeTabIndeces[tabGroup] = 0;
}
var activeTabIndex = activeTabIndeces[tabGroup];
if(index != activeTabIndex)
{
activeTabTimers[tabGroup] = setTimeout("activateTabTimer()",250); // in milliseconds
}
if(IsReloadTabs==1)
{
window.location.reload();
}
}
function mouseOutTab(tabGroup,index){
clearTimeout(activeTabTimers[tabGroup]);
}
现在我想在第一个Tab页面里面增加一个jQuery的tab,即在
<div class="tabPanel" id="tbc0_0">
<a>产品中心</a>