Question

我正在创建一个带有三个标签的电影网站（学校作业）：“正在放映”，“即将上映”，“促销”。我希望“正在显示”下的所有内容在页面加载时立即可见。为此，我需要在HTML + Javascript代码中进行哪些编辑？

到目前为止，我只学习过HTML和CSS，并改编了w3schools的Javascript代码。因此，我不确定该怎么办。谢谢。

这是HTML代码。

<div id="tab-rows">

<div class="tab">
<button class="tablinks" onclick="openContent(event, 'now- 
showing')">Now Showing</button>
<button class="tablinks" onclick="openContent(event, 'coming- 
soon')">Coming Soon</button>
<button class="tablinks" onclick="openContent(event, 
'promotions')">Promotions</button>
</div>

<div id="now-showing" class="tabcontent">
<p>Placeholder Content</p> 
</div>
<div id="coming-soon" class="tabcontent">
<p>Placeholder Content</p>
</div>
<div id="promotions" class="tabcontent">
<p>Placeholder Content</p>
</div>

这是Javascript代码。

<script>
  function openContent(evt, contentName) {
      var i, tabcontent, tablinks;
      tabcontent = document.getElementsByClassName("tabcontent");
      for (i = 0; i < tabcontent.length; i++) {
          tabcontent[i].style.display = "none";
      }
      tablinks = document.getElementsByClassName("tablinks");
      for (i = 0; i < tablinks.length; i++) {
          tablinks[i].className = tablinks[i].className.replace(" 
          active", "");
      }
      document.getElementById(contentName).style.display = "block";
      evt.currentTarget.className += " active";
    } 
</script>

Answer 1

有多种方法。

您可以在html中使用onload并在其中调用您的openContent函数。
如果您只想使用javascript，则可以添加事件侦听器，而必须将openContent作为第二个参数document.addEventListener("DOMContentLoaded", openContent);传入

Answer 2

您可以更改：

<div class="...">{{ my_gettext('error_long_value') | my_replace('%1$d', '200') }}</div>

收件人：

<div id="now-showing" class="tabcontent">

并将其添加到<div id="now-showing" class="tabcontent active">：

<head>

并更新您的脚本，例如：

<style>
  .tabcontent { display: none; }
  .tabcontent.active { display: block; }
  .tablinks.active { cursor: not-allowed; }
</style>

https://codepen.io/anon/pen/qLVQmp

在页面加载时立即显示选项卡内容

2 个答案: