Question

我正在尝试创建一组选项卡，其中第一个应该在页面加载时自动点击。我直接从 w3schools 复制并粘贴了 Javascript 行进行试用，它在代码模拟器上运行，但是现在我将它放入我正在构建的网站中，由于某种原因，加载时没有单击任何内容，这使得看起来很糟糕。

以下是我使用的代码中我认为相关的部分：

document.getElementById("defaultOpen").click();

function openTab(evt, tabName, boxName) {    
var i, tabcontent, tablinks;

var box = document.getElementById(boxName);

tabcontent = box.getElementsByClassName("sg-tab-content");
for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
}

tablinks = box.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" sg-current", "");
}

document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " sg-current";
}

和：

<div class="code-tabs">
  <button class="tablinks" onclick="openTab(event, 'disp-Deck','code-box-1')" id="defaultOpen" style="background-color:#FF8B53">Deck</button>
  <button class="tablinks" onclick="openTab(event, 'disp-Hand','code-box-1')" style="background-color:#FF8B53">Hand</button>
  <button class="tablinks" onclick="openTab(event, 'disp-Field','code-box-1')" style="background-color:#FF8B53">Field</button>
  <button class="tablinks" onclick="openTab(event, 'disp-Graveyard','code-box-1')" style="background-color:#FF8B53">Graveyard</button>
  <button class="tablinks" onclick="openTab(event, 'disp-Banished','code-box-1')" style="background-color:#FF8B53">Banished</button>
  <div class="spacer"></div>
</div>
<pre id="disp-Deck" class="sg-tab-content">
    <p><mark>Deck!</mark></p>
</pre>

编辑：删除网站链接，因为问题已解决，现在我想继续在我的网站上工作:)

整个代码是一个相对较新的人在进行中的工作，因此请原谅设计缺陷。我只是觉得我遵循了我能找到的每一条指令，但它仍然无法正常工作。有什么想法吗？

Answer 1

查看您的网站，我发现代码的排列顺序可能需要调整。

我发现了两件事：

创建点击的 Javascript 可能在相关的 HTML 已加载（如果是这种情况，您应该看到浏览器的开发工具控制台中的错误）
style 元素加载在 body 元素中（它应该在头部元素)

第一个可能是您的问题，但我无法对其进行测试（我没有遇到此问题，但这可能是由于我的服务器的工作方式造成的）。

这是您可以运行的重新排列的代码片段：

axios.get('/users/search',{params: {query: val}})
    .then(response => {
        this.copyUsersOptions = [...response.data];
    })

function openTab(evt, tabName, boxName) {
  var i, tabcontent, tablinks;

  var box = document.getElementById(boxName);

  tabcontent = box.getElementsByClassName("sg-tab-content");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  tablinks = box.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" sg-current", "");
  }

  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " sg-current";
}


document.getElementById("defaultOpen").click();

pre {
  background-color: lightgrey;
  border: 1px solid blue;
  margin-top: 0;
  margin-bottom: 20px;
  font-family: Consolas, Monaco, monospace;
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  text-align: center;
}

button {
  cursor: pointer;
  border: none;
  width: 100%;
  display: inline-block;
  color: grey;
  text-align: center;
  transition: .25s ease;
  border-radius: 12px 12px 0 0;
}

h1 {
  text-align: center;
  margin: 10px;
}

p {
  position: relative;
  bottom: 25px;
}

div.code-tabs {
  display: -webkit-flex;
  display: flex;
  width: 100%;
  text-align: center;
}

div.code-tabs button {
  outline: none;
  background-color: lightgrey;
  margin-right: 4px;
  margin-bottom: -1px;
  text-align: center;
  color: grey;
  font-family: Consolas, Monaco, monospace;
  font-size: .875em;
  /*14px*/
  height: 30px;
  border: 1px solid blue;
  width: 100%;
}

div.code-tabs button.sg-current {
  border-bottom: none !important;
  text-align: center;
  text-decoration: underline;
  font-size: 130%;
  font-family: Consolas, Monaco, monospace;
}

.sg-tab-content {
  display: none;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

div.spacer {
  height: 24px;
  margin-bottom: -1px;
  flex: 3;
  text-align: center;
}

这是您在服务器上尝试的重新排列的代码：

<h1>
  Testing center
</h1>
<div id="code-box-1">
  <div class="code-tabs">
    <button class="tablinks" onclick="openTab(event, 'disp-Deck','code-box-1')" id="defaultOpen" style="background-color:#FF8B53">Deck</button>
    <button class="tablinks" onclick="openTab(event, 'disp-Hand','code-box-1')" style="background-color:#FF8B53">Hand</button>
    <button class="tablinks" onclick="openTab(event, 'disp-Field','code-box-1')" style="background-color:#FF8B53">Field</button>
    <button class="tablinks sg-current" onclick="openTab(event, 'disp-Graveyard','code-box-1')" style="background-color:#FF8B53">Graveyard</button>
    <button class="tablinks" onclick="openTab(event, 'disp-Banished','code-box-1')" style="background-color:#FF8B53">Banished</button>
    <div class="spacer"></div>
  </div>
  <pre id="disp-Deck" class="sg-tab-content" style="display: none;">        <p><mark>Deck!</mark></p>
    </pre>
  <pre id="disp-Hand" class="sg-tab-content" style="display: none;">        <p><mark>Hand!</mark></p>
    </pre>
  <pre id="disp-Field" class="sg-tab-content" style="display: none;">        <p><mark>Field!</mark></p>
    </pre>
  <pre id="disp-Graveyard" class="sg-tab-content" style="display: block;">        <p><mark>Graveyard!</mark></p>
    </pre>
  <pre id="disp-Banished" class="sg-tab-content" style="display: none;">        <p><mark>Banished!</mark></p>
    </pre>
</div>

为什么 defaultOpen 可以在我的代码模拟器上运行，而不能在我的网站上运行？

1 个答案: