0

Squarespace を使用して、3 つのタブを持つタブビューを作成しています。それぞれに、さまざまなブログからいくつかのコンテンツをロードする 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 の代わりにラジコン Web デザイン ( source ) を使用することでした。親コンテナにはoverflow:hiddenが必要で、要素はbottom:-600px;で絶対に配置されます。価値。このように、要素は左右に移動せず、技術的にはページ幅内に収まるため、サイズ変更しても問題はありません。また、visibility:hidden; も使用できます。display:block の代わりに; これにより、ブラウザ ウィンドウのサイズを変更すると、Squarespace ブロックがページ幅に合わせて調整されます。

結果はhttps://fbc-monterey.squarespace.com/で見ることができます

于 2014-08-08T14:50:09.920 に答える