将选项卡重置为默认调整窗口大小..Javascript

Question

我有该代码..它的正常选项卡javascript 当我调整窗口大小时我需要..到最大> 450px选项卡回到默认值我的意思是tab2自动回到tab1..因为我在我的菜单中使用它

我尝试了更多选项卡代码，但是..我不能...

HTML

    <ul class="tabs">
        <li class="active" data-content=".one">One</li>
        <li data-content=".two">Two</li>
        <li data-content=".three">Three</li>
    </ul>
    <div class="content">
        <div class="one">cont one</div>
        <div class="two">2</div>
        <div class="three">cont three</div>
    </div>

CSS

.tabs {
    display:flex;
    list-style:none;
    padding:0;
    margin:0
}
.tabs li {
padding:10px 30px;
background:white;
border-right:1px solid red;
cursor:pointer;
transition:0.5s
}
.tabs li.active,
.tabs li:hover {
background:pink;
}
.content {
background:pink;
}
.content > div {
padding:30px
}
.content div:not(:first-child){
    display:none
}

Javascript

let tabs = document.querySelectorAll(".tabs li");
let tabsArray = Array.from(tabs);
let divs = document.querySelectorAll(".two, .one, .three");
let divsArray = Array.from(divs);

    tabsArray.forEach((ele) => {
        ele.addEventListener("click", function (e){
            tabsArray.forEach((ele) => {
                ele.classList.remove("active");
            });
    
        e.currentTarget.classList.add("active");
        divsArray.forEach((div) => {
            div.style.display = "none"
        });
            document.querySelector(e.currentTarget.dataset.content).style.display = "block"
    });

    });

Answer 1

根据您的解释，您似乎需要根据视口大小或选项卡容器的大小更改 UI。

具体操作方法如下：

window.addEventListener('resize', function() {
    const viewportWidth = window.innerWidth
    if ( viewportWidth <= 450 ) {
        // activate tab 1
    }
})

或者为选项卡容器创建一个观察者：

const element = document.querySelector('.tabs')

const observer = new ResizeObserver(entries => {
    for (let entry of entries) {
        const width = entry.contentRect.width

        if (width <= 450) {
            // Select Tab 1
        }
    }
});

// Start observing
observer.observe(element)

我没有测试过，但我认为 ResizeObserver 可能比窗口调整大小事件监听器具有性能优势。

您可以使用浏览器中的开发者工具进行验证。 如果您在该页面上没有巨大的 DOM 树，这应该不是问题。