Question

我在下面的w3school链接中显示了如何使用选项卡式内容创建模态

http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_modal_tab

我更改了代码以添加另一个按钮来打开自己的选项卡式内容，但除非我按下它，否则它不会显示其内容。修改后的代码如下所示：

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<style>
.city {display:none}
</style>
<body class="w3-container"><br>
<button onclick="document.getElementById('id01').style.display='block'" class="w3-btn">Open Tabbed Modal</button>
<button onclick="document.getElementById('id02').style.display='block'" class="w3-btn">Open Tabbed Modal 02</button>
<div id="id01" class="w3-modal">
 <div class="w3-modal-content w3-card-4 w3-animate-zoom">
  <header class="w3-container w3-blue">
   <span onclick="document.getElementById('id01').style.display='none'"
   class="w3-closebtn w3-padding-top">&times;</span>
   <h2>Header</h2>
  </header>
  <ul class="w3-pagination w3-white w3-border-bottom" style="width:100%;">
   <li><a href="#" class="tablink" onclick="openCity(event, 'London')">London</a></li>
   <li><a href="#" class="tablink" onclick="openCity(event, 'Paris')">Paris</a></li>
   <li><a href="#" class="tablink" onclick="openCity(event, 'Tokyo')">Tokyo</a></li>
  </ul>
  <div id="London" class="w3-container city">
   <h1>London</h1>
   <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
  <div id="Paris" class="w3-container city">
   <h1>Paris</h1>
   <p>Paris is the capital of France.</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div id="Tokyo" class="w3-container city">
   <h1>Tokyo</h1>
   <p>Tokyo is the capital of Japan.</p><br>
  </div>
  <div class="w3-container w3-light-grey w3-padding">
   <button class="w3-btn w3-right w3-white w3-border"
   onclick="document.getElementById('id01').style.display='none'">Close</button>
  </div>
 </div>
</div>
<div id="id02" class="w3-modal">
 <div class="w3-modal-content w3-card-4 w3-animate-zoom">
  <header class="w3-container w3-blue">
   <span onclick="document.getElementById('id02').style.display='none'"
   class="w3-closebtn w3-padding-top">&times;</span>
   <h2>Header</h2>
  </header>
  <ul class="w3-pagination w3-white w3-border-bottom" style="width:100%;">
   <li><a href="#" class="tablink" onclick="openCity(event, 'London2')">London</a></li>
   <li><a href="#" class="tablink" onclick="openCity(event, 'Paris2')">Paris</a></li>
   <li><a href="#" class="tablink" onclick="openCity(event, 'Tokyo2')">Tokyo</a></li>
  </ul>
  <div id="London2" class="w3-container city">
   <h1>London 2</h1>
   <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
  <div id="Paris2" class="w3-container city">
   <h1>Paris 2</h1>
   <p>Paris is the capital of France.</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div id="Tokyo2" class="w3-container city">
   <h1>Tokyo 2</h1>
   <p>Tokyo is the capital of Japan.</p><br>
  </div>
  <div class="w3-container w3-light-grey w3-padding">
   <button class="w3-btn w3-right w3-white w3-border"
   onclick="document.getElementById('id02').style.display='none'">Close</button>
  </div>
 </div>
</div>
<script>
document.getElementsByClassName("tablink")[0].click();
function openCity(evt, cityName) {
  var i, x, tablinks;
  x = document.getElementsByClassName("city");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < x.length; i++) {
    tablinks[i].classList.remove("w3-light-grey");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.classList.add("w3-light-grey");
}
</script>
</body>
</html>

我认为诀窍是在脚本标记后面的第一行，它说：

document.getElementsByClassName("tablink")[0].click();

但我不知道如何弄清楚

Answer 1

如果你想在加载后打开它：

document.getElementById('id01').style.display='block';

这选择了哪个标签会打开：

document.getElementsByClassName("tablink")[1].click();

来自w3school的HTML代码创建带有标签内容的模态

1 个答案: