求助:页面刷新或者函数调用
我模仿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>
</div>
这个DIV的中间增加代码如下:
<script type="text/javascript">
$(function() {
$('#container-1 > ul').tabs();
});
</script>
<div id="container-1">
<ul>
<li><a href="#fragment-1"><span>One</span></a></li>
<li><a href="#fragment-2"><span>Two</span></a></li>
<li><a href="#fragment-3"><span>Three</span></a></li>
</ul>
<div id="fragment-1">
<p>First tab is active by default:</p>
<pre><code>$('#container-1 > ul').tabs();</code></pre>
</div>
<div id="fragment-2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div id="fragment-3">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>
现在的问题是,当这个html第一次载入的时候,默认激活的微软的Tab是第一个Tab(产品中心),我可以看到我增加的jQuery的tab,但是如果我进行过微软的tab页面的切换,则在切换回第一个tab后,发现Jquery的tab没有被创建,应该是“$('#container-1 > ul').tabs();”这段函数在tab切换回来后没有被执行。F5刷新页面,可以看到jquery tab,在切换微软tab,并切回第一个tab,则看不到jquery tab。
请问怎样才能使“$('#container-1 > ul').tabs();“一直可以有效呢?
我尝试切换会第一个Tab页面的时候,重载这个tab也,因此修改了activetab函数,function activateTab(tabGroup,index,IsReloadTabs),增加了一个参数IsReloadTabs,并在函数内添加代码:
if(IsReloadTabs==1)
{
window.location.reload();
}
在创建微软tab的时候,变成:
<li class="tab tabActive" tabIndex="0" id="tbh0_0" onMouseOver="activateTab(0,0,1)" onMouseOut="mouseOutTab(0,0)" onfocus="KPF = 'activateTab(0,0)';" onKeyDown="return KP(event);">产品中心</li>
这样在切回第一个tab的时候,会自动刷新页面,则可以看到jquery的tab。但是由于刷新页面需要时间,因此变得微软tab的切换很不顺畅。
请帮忙看看如何才能解决这个问题。
谢谢!
[解决办法]
能不能发个完整的代码 你这样 既看不懂 又没办法调试
[解决办法]
看不明白
[解决办法]
是可以不用
refresh的
[解决办法]