Question

我正在尝试将w3schools重构为可切换的标签代码，因为我们所有人都知道使用内联JavaScript是非常糟糕的做法，因此我尝试尽可能地将它们分离，因此我选择了{{1} }，我添加了一个事件侦听器，但我在城市名称方面遇到了麻烦（查看其代码，您将了解我在说什么）

请提供任何帮助，并先谢谢您

HTML

tablinks

CSS

<!-- Tab links -->
<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<!-- Tab content -->
<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

JavaScript

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

Answer 1

w3schools是不良实践的一个很好的来源，因为他们在尝试突出他们所举的一个小例子时常常会采取许多捷径。

在实践中，您可以通过使用data-attribute属性来解决这种情况。如果您看不到某些来电，请参阅以下一些文章：

// Wrap our code in an IIFE in order to avoid polluting the global namespace
// and to facilitate faster garbage collection
(function(){

// Preload queries for later use
const tabs = document.querySelectorAll('.tablinks');
const content = document.querySelectorAll('.tabcontent');

// iterate tab to create content interaction
tabs.forEach(f => // f will be the tab element in this loop

  // Assign click event to each tab
  f.addEventListener('click',function(){

    // Locate any previously marked active tab element
    const prevActive = document.querySelector('.tablinks.active');

    // If a previously marked element exists set its classname to default
    if(prevActive) prevActive.className = 'tablinks';

    // Assign the currently clicked tab element the active class
    f.className = 'tablinks active';

    // Iterate through the content to look for the data-attribute we used earlier
    content.forEach(c => { // c will be the content element in this loop

      // if the id of the element matches the data attribute from the tab then show the content
      c.style.display = c.id == f.getAttribute("data-city") ? "block" : "none" ;
    })
  })
);

})();

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

<div class="tab">
  <button class="tablinks" data-city="London">London</button>
  <button class="tablinks" data-city="Paris">Paris</button>
  <button class="tablinks" data-city="Tokyo">Tokyo</button>
</div>

<!-- Tab content -->
<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

Answer 2

    <button id="London" class="tablinks">London</button>


    var btns = document.querySelectorAll('.tab button')

        btns.forEach((btn)=>{
            btn.addEventListener('click', (event)=>{
               openCity(event, btn.id, btn)
            })
        })

为每个按钮提供一个带有城市名称的ID，然后将该ID传递给openCity函数

您也可以将btn传递给openCity函数

使用内联JavaScript重构代码

2 个答案: