我转到了下面的 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">×</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">×</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>
我认为诀窍是在 script 标签之后的第一行，它说:
document.getElementsByClassName("tablink")[0].click();
但是我不知道怎么解决
最佳答案
如果你想在加载后打开它，添加:
document.getElementById('id01').style.display='block';
这选择了将打开哪个选项卡:
document.getElementsByClassName("tablink")[1].click();
关于javascript - 来自 w3school 的 HTML 代码，用于创建带有选项卡式内容的模式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38881294/