Question

我在主页面中使用idtabs js作为make标签。

http://www.sunsean.com/idTabs/

我把每张标签放入12张图片。当页面加载第一个加载选项卡div和标题和菜单图像不加载时。所以4分钟等待页面加载完成。

我想在加载页面第一个主图像加载然后defult选项卡加载图像，当我选择其他标签图像加载标签???

<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>

Answer 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方法加载外部页面获取link元素的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

Answer 2

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

tabs = document.querySelector('#tabs a');
tabs[0].onclick = function(){anyImgTag.src = "images/someimage.jpeg"};

选择后加载隐藏的选项卡图像

2 个答案:

HTML

Jquery的

演示