问题描述
我正在尝试实施 Will Myers 的教程 https://www.youtube.com/watch?v=4_fvE8mO1ic&t=26s
在 squarespace 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>
解决方法
本教程使用了一种效率低下、重复且坦率幼稚的方法。至少,我会简化方法并执行以下操作,这不需要 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 而言,大多数教程和代码片段都是由 JavaScript 经验相对较少的个人编写的。这并不是说它们不是一个合理的起点,但了解这一点可能会帮助您一路走来。