在 Squarespace 7.1 中，我试图显示一个部分并隐藏其他部分 - 不工作

Question

我正在尝试实现 Will Myers 的教程 https://www.youtube.com/watch?v=4_fvE8mO1ic&t=26s

在方形空间 7.1

您可以在此处查看我的实时页面。 https://www.thesquaresandbox.com/tabbed-sections 当我单击选项卡按钮时，会出现正确的部分，但其他两个部分应该被隐藏，但它们不是。 TIA

<script>
 
  function tabOneClick() {
    $('button.tab-btn:nth-of-type(1)').addClass("active");
    $('button.tab-btn:nth-of-type(2)').removeClass("active");
    $('button.tab-btn:nth-of-type(3)').removeClass("active");  
    
    $('[data-section-id="6069af192a871859f3dddfc3"]').addClass("tab-section-show");
    $('[data-section-id="6069af0fd446556b94c10177"]').removeClass("tab-section-show");
    $('[data-section-id="6069bad471b2824d888bdf66"]').removeClass("tab-section-show");
    
  }
  
  
  function tabTwoClick() {
    $('button.tab-btn:nth-of-type(1)').removeClass("active");
    $('button.tab-btn:nth-of-type(2)').addClass("active");
    $('button.tab-btn:nth-of-type(3)').removeClass("active");
    
    $('[data-section-id="6069af192a871859f3dddfc3"]').removeClass("tab-section-show");
    $('[data-section-id="6069af0fd446556b94c10177"]').addClass("tab-section-show");
    $('[data-section-id="6069bad471b2824d888bdf66"]').removeClass("tab-section-show");
  }
  
  
  function tabThreeClick() {
    $('button.tab-btn:nth-of-type(1)').removeClass("active");
    $('button.tab-btn:nth-of-type(2)').removeClass("active");
    $('button.tab-btn:nth-of-type(3)').addClass("active");
    
    $('[data-section-id="6069af192a871859f3dddfc3"]').removeClass("tab-section-show");
    $('[data-section-id="6069af0fd446556b94c10177"]').removeClass("tab-section-show");
    $('[data-section-id="6069bad471b2824d888bdf66"]').addClass("tab-section-show");
  }
  
  
  $(function() {
    $('[data-section-id="6069af192a871859f3dddfc3"]').addClass("tab-section-hide");
    $('[data-section-id="6069af0fd446556b94c10177"]').addClass("tab-section-hide");
    $('[data-section-id="6069bad471b2824d888bdf66"]').addClass("tab-section-hide");
    tabOneClick();
  });
</script>

.tabs-container{
  transform:translateY(100%);
  width:100% !important;
  text-align:center;
  border-bottom: 1px solid #999;
  overflow: auto;
  overflow-x:auto;
  white-space: nowrap;
  z-index:99;
}
.tab-btn{
  max-width:150px;
  display: inline-block;
  border-radius:3px 3px 0 0;
  border:1px solid #999;
  padding: 12px 18px;
  font-size:1.2em;
  background:white;
  margin-bottom:none !important;
  border:none !important;
  &:not(:first-of-type){
  margin-left:10px;    
  }
}
.tab-btn.active{
  background:lightblue;
}

.tab-section-hide{
  display:none;
}
.tab-section-show{
  display:block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<div class="tabs-container">
  <button class="tab-btn" id="tab-1" onclick="tabOneClick()">
    About
  </button>
  <button class="tab-btn" id="tab-2" onclick="tabTwoClick()">
    Gallery
  </button>
  <button class="tab-btn" id="tab-3" onclick="tabThreeClick()">
    Contact
  </button>
</div>

Answer 1

本教程使用了一种效率相当低、重复且坦率地幼稚的方法。至少，我会简化方法并执行以下操作，这不需要 JQuery 并避免为每个选项卡重复相同的代码。您可以保留 HTML 和 CSS 原样，但也可以进行简化。

<script>
// Wrap code in a function to prevent adding vars to global scope.
(function() {
  // Store references to the tab container and the tab sections.
  var tabContainer = document.getElementsByClassName("tabs-container")[0];
  var tabSections = document.querySelectorAll(
    'section[data-section-id="6069af192a871859f3dddfc3"],' +
    'section[data-section-id="6069af0fd446556b94c10177"],' +
    'section[data-section-id="6069bad471b2824d888bdf66"]'
  );
  var tabs;
  
  // Don't go any further if either of the above elements aren't found.
  if (!tabContainer || tabSections.length < 1) {
    return;
  }
  
  // Store a reference to all the individual tabs.
  tabs = tabContainer.children;
  
  // When the tab container is clicked, show the corresponding content.
  //  - Uses event delegation to avoid adding an event listener to every tab.
  //  - Gets the index of the tab that was clicked, and uses that index to set active and inactive content.
  tabContainer.addEventListener("click", function(e) {
    var tab = e.target;
    var index = Array.prototype.indexOf.call(tabs, tab);
    tabSections.forEach(function(t) {
      if (Array.prototype.indexOf.call(tabs, t) == index) {
        tab.classList.add("active");
      }
      else {
        tab.classList.remove("active");
      }
    });
  });
  
  // Click the first tab.
  tabs[0].click();
})();
</script>

请注意，上面的代码假定任何给定页面上只有一个选项卡式 UI，并且这些部分按与选项卡对应的顺序列出。

请注意，对于 Squarespace，大多数教程和代码 sn-ps 都是由 JavaScript 经验相对较少的人编写的。这并不是说它们不是一个合理的起点，但了解这一点可能会对您有所帮助。