0

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

这是我目前正在使用的代码：

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>

4

1 回答 1

0

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>

于 2019-11-20T20:51:10.093 回答