我使用 idtabs js 在主页中制作选项卡。
http://www.sunsean.com/idTabs/
我在每个选项卡上放了 12 张图像。当页面加载时，首先加载选项卡 div，并且标题和菜单图像不会首先加载。所以需要 4 分钟等待页面加载完成。
我想在加载页面中首先加载主图像，然后加载默认选项卡图像，当我选择其他选项卡时加载选项卡上的图像？？？
<div id="tabs" dir="rtl">
<ul class="tabNavigation">
<li><a href="#topdownload" style="font:12px tahoma;">top</a></li>
<li><a href="#featured" style="font:12px tahoma">more</a></li>
<li><a href="#toprated" style="font:12px tahoma">defult</a></li>
<li><a href="#latest" style="font:12px tahoma;" >free</a></li>
</ul>
</div>
最佳答案
看来您使用的插件非常基本，并且不允许ajax请求。
一种解决方案是对外部 html 文件(featured.htm、toperated.html...)使用加载方法，但是我确信有更好的方法使用 ajax 请求服务器和预加载插件。
HTML
<html>
<head>
...
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
</head>
<body>
...
<!-- tabs -->
<ul class="css-tabs">
<li><a href="topdownload.htm">top</a></li>
<li><a href="featured.htm">more</a></li>
<li><a class="selected" href="toprated.htm">default</a></li>
<li><a href="latest.htm">free</a></li>
</ul>
<!-- single pane. it is always visible -->
<div class="css-panes">
<div style="display:block">
<!-- loaded content here -->
</div>
</div>
Jquery
现在我们使用ajax加载外部页面，使用load方法获取链接元素的href:
<script>
$(function() {
$("ul.css-tabs").tabs("div.css-panes > div", {
effect: 'fade',
onBeforeClick: function(event, i) {
// get the pane to be opened
var pane = this.getPanes().eq(i);
// only load once. remove the if ( ... ){ } clause if
// you want the page to be loaded every time
if (pane.is(":empty")) {
// load it with a page specified in the tab's href
// attribute
pane.load(this.getTabs().eq(i).attr("href"));
}
}
});
});
</script>
演示
关于php - 选择后加载隐藏选项卡图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13678892/