默认显示选项卡式内容

Question

我正在构建的标签集遇到了问题。虽然选项卡在单击时可以正常工作，但我无法获得要显示的默认选项卡。我希望第一个选项卡打开并在页面加载时可见。

下面是我目前使用的代码：

​

function openValueImage(evt, valueProp) {
  // Declare all variables
  var i, tabcontent, tablink;

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


  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }


  tablink = document.getElementsByClassName("tablink");
  for (i = 0; i < tablink.length; i++) {
    tablink[i].className = tablink[i].className.replace(" active", "");
  }


  document.getElementById(valueProp).style.display = "block";
  evt.currentTarget.className += " active";

}

.tab {overflow:hidden;}
.tabcontent {display: none;}
.tab button {cursor: pointer;
  transition: 0.3s; background-color:transparent !important;text-align:left!important; padding-left: 0px; 
padding-right: 0px; padding-top: 20px; opacity:.75;}
.tab button.active {border-top:2px solid #ffb547  !important; opacity:1 !important;}
.tab button:hover {border-top: solid 3px #ffb547 !important; opacity:1 !important;}

<div id="content-1" class="tabcontent"><img src="https://via.placeholder.com/300" alt=""></div>

<div id="content-2" class="tabcontent"><img src="https://via.placeholder.com/300/0000FF/808080" alt=""></div>

<div id="content-3" class="tabcontent"><img src="https://via.placeholder.com/300" alt=""></div>

<div id="content-4" class="tabcontent"><img src="https://via.placeholder.com/300/0000FF/808080" alt=""></div>

<div>

  <button class="tablink" onclick="openValueImage(event, 'content-1')" id="defaultOpen"> <h3>Make Smarter Decisions</h3>
<p>Organize your loan or security portfolio data and model scenarios so you can confidently manage risk.</p></button>
  
  <button class="tablink" onclick="openValueImage(event, 'content-2')"><h3>Work More Efficiently</h3>
<p>Make complex data analysis simple with our powerful platform and team of experts.</p></button>
  
  <button class="tablink" onclick="openValueImage(event, 'content-3')"><h3>Consult the Experts</h3>
<p>Select data scientists and quants to solve your toughest portfolio data and risk-management problems.</p></button>
  
  <button class="tablink" onclick="openValueImage(event, 'content-4')"><h3>Scale Effortlessly</h3>
<p>Adapt technology and human capital as demands change. Grow faster with a platform and company built to scale.</p></button>
  
</div>

​

Answer 1

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

这一行应该在openValueImage函数的外部。

​

function openValueImage(evt, valueProp) {
  // Declare all variables
  var i, tabcontent, tablink;

  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }


  tablink = document.getElementsByClassName("tablink");
  for (i = 0; i < tablink.length; i++) {
    tablink[i].className = tablink[i].className.replace(" active", "");
  }


  document.getElementById(valueProp).style.display = "block";
  evt.currentTarget.className += " active";

}

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

.tab {overflow:hidden;}
.tabcontent {display: none;}
.tab button {cursor: pointer;
  transition: 0.3s; background-color:transparent !important;text-align:left!important; padding-left: 0px; 
padding-right: 0px; padding-top: 20px; opacity:.75;}
.tab button.active {border-top:2px solid #ffb547  !important; opacity:1 !important;}
.tab button:hover {border-top: solid 3px #ffb547 !important; opacity:1 !important;}

<div id="content-1" class="tabcontent"><img src="https://via.placeholder.com/300" alt=""></div>

<div id="content-2" class="tabcontent"><img src="https://via.placeholder.com/300/0000FF/808080" alt=""></div>

<div id="content-3" class="tabcontent"><img src="https://via.placeholder.com/300" alt=""></div>

<div id="content-4" class="tabcontent"><img src="https://via.placeholder.com/300/0000FF/808080" alt=""></div>

<div>

  <button class="tablink" onclick="openValueImage(event, 'content-1')" id="defaultOpen"> <h3>Make Smarter Decisions</h3>
<p>Organize your loan or security portfolio data and model scenarios so you can confidently manage risk.</p></button>
  
  <button class="tablink" onclick="openValueImage(event, 'content-2')"><h3>Work More Efficiently</h3>
<p>Make complex data analysis simple with our powerful platform and team of experts.</p></button>
  
  <button class="tablink" onclick="openValueImage(event, 'content-3')"><h3>Consult the Experts</h3>
<p>Select data scientists and quants to solve your toughest portfolio data and risk-management problems.</p></button>
  
  <button class="tablink" onclick="openValueImage(event, 'content-4')"><h3>Scale Effortlessly</h3>
<p>Adapt technology and human capital as demands change. Grow faster with a platform and company built to scale.</p></button>
  
</div>

​