Question

我正在使用Squarespace创建一个包含三个标签的tabview。每个包含一个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

Answer 1

我的回答是使用无线电控制的网页设计（source）而不是Javascript。父容器必须具有overflow：hidden，并且元素绝对位于底部：-600px;值。这样，元素不会向左和向右移动，并且在技术上仍然在页面宽度内，因此在调整大小时没有问题。另外，我们可以使用visibility：hidden;而不是显示：块;当我们调整浏览器窗口大小时，它允许Squarespace块调整页面宽度。

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

看到

Tab开关不加载内容

1 个答案: