(JavaScript) removeAttribute 没有删除属性

Question

我目前正在制作一个标签，标签内容包含 iframe。我希望每次单击选项卡时，iframe 重新加载页面。

但是当我检查时，源属性存在于每个 iframe 中，并且问题显示为：Uncaught TypeError: Cannot read properties of undefined (reading 'setAttribute')。我是 JavaScript 的新手，不知道编码。请帮我解决这个问题。非常感谢。

所以，这是代码：

let tabs = document.querySelectorAll('.tab');
let content = document.querySelectorAll('.content-item');

for (let i = 0; i < tabs.length; i++) {
  tabs[i].addEventListener('click', () => tabClick(i));
}

function tabClick(currentTab) {
  removeActive();
  tabs[currentTab].classList.add('active');
  content[currentTab].classList.add('active');
  content[currentTab].removeAttribute('src');
}

function removeActive() {
  for (let i = 0; i < tabs.length; i++) {
    tabs[i].classList.remove('active');
    content[i].classList.remove('active');
    content[i].setAttribute('src', content[i].getAttribute('data-src'));
  }
}

.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.tabs {
  display: flex;
  justify-content: center;
  width: 100%;
}

.tab {
  font-size: 16px;
  padding: 5px 15px;
  cursor: pointer;
}

.tab.active {
  background-color: rgb(250, 97, 9);
}

.content {
  width: 100vw;
  margin-top: 50px;
}

.content-item {
  display: none;
  padding: 0px;
  border: none;
}

.content-item.active {
  display: flex;
  justify-content: center;
}

.content-iframe {
  border: none;
  padding: 0px;
  margin: 0px;
  width: 100vw;
  height: 50vh;
}

<div class="container">
  <div class="tabs">
    <div class="tab active">Tokyo</div>
    <div class="tab">Paris</div>
    <div class="tab">Washington</div>
    <div class="tab">Jakarta</div>
    <div class="tab">London</div>
  </div>
  
  <div class="content">
    <div class="content-item active">
      <iframe class="content-iframe" data-src="https://en.wikipedia.org/wiki/Tokyo" src="https://en.wikipedia.org/wiki/Tokyo" loading="lazy"></iframe>
    </div>
    
    <div class="content-item">
      <iframe class="content-iframe" data-src="https://en.wikipedia.org/wiki/Paris" src="https://en.wikipedia.org/wiki/Paris" loading="lazy"></iframe>
    </div>
    
    <div class="content-item">
      <iframe class="content-iframe" data-src="https://en.wikipedia.org/wiki/Washington" src="https://en.wikipedia.org/wiki/Washington" loading="lazy"></iframe>
    </div>
    
    <div class="content-item">
      <iframe class="content-iframe" data-src="https://en.wikipedia.org/wiki/Jakarta" src="https://en.wikipedia.org/wiki/Jakarta" loading="lazy"></iframe>
    </div>
    
    <div class="content-item">
      <iframe class="content-iframe" data-src="https://en.wikipedia.org/wiki/London" src="https://en.wikipedia.org/wiki/London" loading="lazy"></iframe>
    </div>
  </div>
</div>

Answer 1

首先，我认为您在错误的地方执行了两个 iframe 操作。我已将它们撤消，因此 iframe 在 removeActive() 中被清除。然后，您没有将源更新定位到 iframe。

否则你做得很好。继续加油！

let tabs = document.querySelectorAll('.tab');
let content = document.querySelectorAll('.content-item');

for (let i = 0; i < tabs.length; i++) {
  tabs[i].addEventListener('click', () => tabClick(i));
}

function tabClick(currentTab) {
  const iframe = content[currentTab].querySelector('iframe');

  removeActive();
  tabs[currentTab].classList.add('active');
  content[currentTab].classList.add('active');
  iframe.setAttribute('src', iframe.getAttribute('data-src'));
}

function removeActive() {
  for (let i = 0; i < tabs.length; i++) {
    tabs[i].classList.remove('active');
    content[i].classList.remove('active');
    content[i].querySelector('iframe').removeAttribute('src');
  }
}

.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.tabs {
  display: flex;
  justify-content: center;
  width: 100%;
}

.tab {
  font-size: 16px;
  padding: 5px 15px;
  cursor: pointer;
}

.tab.active {
  background-color: rgb(250, 97, 9);
}

.content {
  width: 100vw;
  margin-top: 50px;
}

.content-item {
  display: none;
  padding: 0px;
  border: none;
}

.content-item.active {
  display: flex;
  justify-content: center;
}

.content-iframe {
  border: none;
  padding: 0px;
  margin: 0px;
  width: 100vw;
  height: 50vh;
}

<div class="container">
  <div class="tabs">
    <div class="tab active">Tokyo</div>
    <div class="tab">Paris</div>
    <div class="tab">Washington</div>
    <div class="tab">Jakarta</div>
    <div class="tab">London</div>
  </div>

  <div class="content">
    <div class="content-item active">
      <iframe class="content-iframe" data-src="https://en.wikipedia.org/wiki/Tokyo" src="https://en.wikipedia.org/wiki/Tokyo" loading="lazy"></iframe>
    </div>

    <div class="content-item">
      <iframe class="content-iframe" data-src="https://en.wikipedia.org/wiki/Paris" src="https://en.wikipedia.org/wiki/Paris" loading="lazy"></iframe>
    </div>

    <div class="content-item">
      <iframe class="content-iframe" data-src="https://en.wikipedia.org/wiki/Washington" src="https://en.wikipedia.org/wiki/Washington" loading="lazy"></iframe>
    </div>

    <div class="content-item">
      <iframe class="content-iframe" data-src="https://en.wikipedia.org/wiki/Jakarta" src="https://en.wikipedia.org/wiki/Jakarta" loading="lazy"></iframe>
    </div>

    <div class="content-item">
      <iframe class="content-iframe" data-src="https://en.wikipedia.org/wiki/London" src="https://en.wikipedia.org/wiki/London" loading="lazy"></iframe>
    </div>
  </div>
</div>

(JavaScript) removeAttribute 没有删除属性

(JavaScript) removeAttribute didn't remove the Attribute

javascript

tabs