0

我在主页中使用 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>
4

2 回答 2

1

似乎您使用的插件非常基本，并且不允许 ajax 请求。

一种解决方案是对外部 html 文件（featured.htm、toprated.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>

演示

http://jquerytools.org/demos/tabs/ajax-noeffect.htm

于 2012-12-03T08:26:37.240 回答
1

您可以通过将图像动态分配给要按需下载的 img 标记的 src 属性来实现此目的：

tabs = document.querySelector('#tabs a');
tabs[0].onclick = function(){anyImgTag.src = "images/someimage.jpeg"};
于 2012-12-03T08:38:11.637 回答