0

我正在使用 Squarespace 创建一个带有三个选项卡的选项卡视图。每个都包含一个 Squarespace 块，它从不同的博客加载一些内容。唯一的问题是，当页面调整大小时，隐藏的块的行为不正确。当前可见的块工作正常，并且可以调整大小，但是当我单击其他块时，它们都很时髦并且大小不正确。

这是我的标签代码：

window.onload=function() {
  // get tab container
  var container = document.getElementById("content_3");
    // set current tab
    var navitem = container.querySelector(".tabs ul li");
    //store which tab we are on
    var ident = navitem.id.split("_")[1];
    navitem.parentNode.setAttribute("data-current",ident);
    //set current tab with class of activetabheader
    navitem.setAttribute("class","active");

    //hide two tab contents we don't need
    var pages = container.querySelectorAll(".tab-page");
    for (var i = 1; i < pages.length; i++) {
      pages[i].style.display="none";
    }

    //this adds click event to tabs
    var tabs = container.querySelectorAll(".tabs ul li");
    for (var i = 0; i < tabs.length; i++) {
      tabs[i].onclick=displayPage;
    }
}
// on click of one of tabs
function displayPage() {
  var current = this.parentNode.getAttribute("data-current");
  //remove class of activetabheader and hide old contents
  document.getElementById("tabHeader_" + current).removeAttribute("class");
  document.getElementById("tab_" + current).style.display="none";
  var ident = this.id.split("_")[1];
  //add class of activetabheader to new active tab and show contents
  this.setAttribute("class","active");
  document.getElementById("tab_" + ident).style.display="block";
  this.parentNode.setAttribute("data-current",ident);

  Y.all('img[data-src]' ).each(function(img) {
    ImageLoader.load(img);
  });

}

我认为 window.resize 上的事件可以修复它，或者 Squarespace 的 ImageLoader 函数（这是底部的 YUI，虽然没有效果），但我没有运气。直播网站位于 fbc-monterey.squarespace.com

4

1 回答 1

0

我的答案在于使用无线电控制的网页设计（源代码）而不是 Javascript。父容器必须有 overflow:hidden 并且元素绝对定位在底部：-600px; 价值。这样，元素不会左右移动，并且在技术上仍在页面宽度内，因此调整大小没有问题。另外，我们可以使用可见性：隐藏；而不是显示：块；这允许 Squarespace 块在我们调整浏览器窗口大小时调整到页面宽度。

结果可见https://fbc-monterey.squarespace.com/

于 2014-08-08T14:50:09.920 回答