Reset tabs to default resize window .. Javascript

I have that code .. its normal tabs javascript
I need when i resize the window .. To bigest then > 450px tabs back to default i mean tab2 automatic back to tab1 .. Cuz i use it in my menu

I tried more then tab code but .. I can't ...

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"
  });

});

.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
}

<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>

Solution

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"
  });

});

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

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

        if (width <= 450) {
            // set active class only on first tab
            const otherTabs = document.querySelectorAll("ul.tabs > li:not([data-content='.one'])")
            otherTabs.forEach(item => item.classList.remove("active"))
            // hide the content for the first 2 tabs
            const otherTabsContent = document.querySelectorAll(".three, .two")
            otherTabsContent.forEach(item => item.style.display = "none")
            // activate first tab
            const tabOne = document.querySelector("[data-content='.one']")
            tabOne.classList.add("active")
            document.querySelector("div.one").style.display = "block"
        }
    }
});

// Start observing
observer.observe(element)

.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
}

<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>

From what you explained it seems you need to change the UI based on viewport size or the size of the tabs container.

Here's how you can do it:

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

or create an observer for tabs container:

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)

I have not tested it, but I think the ResizeObserver may have performance advantages over the window resize event listener.

You can verify that using developer tools in the browser. This shouldn't be an issue if you do not have a huge DOM tree on that page though.