个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我转到了下面的 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/
25
4
0
这个问题在这里已经有了答案: What is a NullPointerException, and how do I fix it? (12 个回答) 6年前关闭。 我正在为我的类(class)做一
我正在开发一个大型 React/Redux Web 应用程序，最近在实现新功能时遇到了问题。我担心我没有遵循 redux 最佳实践。我想我应该简化情况并将其发布在这里，以便了解其他人如何在 redux
我有一个 List 对象，其中包含 School.Id、School.Name 和 School.Address 。 我需要在 selectOneMenu 列表框中列出所有 School.Name。
第一次张贴在这里，但现在潜伏了几个月。目前沉迷于 C++，具有少量 Java 知识以及之前在学校的 Comp Sci 类(class)。如果你们中的一些人看到这个并且感到失望，我深表歉意，因为已经有关
我需要为我正在从事的一个项目编写一个函数，我们正在为这个项目制作一个仅供机构的学生、教职员工和校友访问的网站。 假设学校网站是:school.edu。 我在编写用于检查提交的电子邮件地址是否具有“sc
编写一个 SELECT，它返回每个乐队的第五张专辑的名称。如果乐队没有第五张专辑，那应该什么也没有。如果一个乐队在一年内有更多专辑，则让按专辑名称的字典排列适用。结果应包括乐队名称和专辑名称，按照乐队
Stack Overflow 和发帖新手。刚开始接触 JavaScript，我陷入了 CodeSchool 关闭问题。问题是: 现在，针对特定障碍物的警报已有效计数，开发女孩需要您存储报告的障碍物位置
我意识到控制台 win32 应用程序没有完全退出，所以我正在尝试切换到仅消息窗口。我正在从另一个进程启动该应用程序并尝试彻底终止它。 这是 win32 应用程序，它在启动和干净关闭时生成一个 calc
我目前正在使用 websockets 开发一些桌面应用程序(更准确地说:我正在使用 Alchemy WebSockets)。到目前为止，我的代码运行良好，但 Visual Studio 2010 告诉
使用这个简化的例子；您认为哪种方法更好，为什么？ 编辑:关系必须是 1 对 1。一个学生只存在于一所学校。 Option1 **Table Schools:** id int primary key;
非常感谢大家。 html 很好，我相信 javascript 仍然是一个问题，php 看起来还不错，但我需要更多的指针。我已按如下方式编辑了代码... html:
# -*- coding: UTF-8 -*- import urllib.request import re import os os.system("cls") url=input("Url Li
中学程序 GCD 第 1 步找到 m 的质因数。 第 2 步找到 n 的质因数。 第 3 步确定两个素数展开式中的所有公因子在第 1 步 和第 2 步 中找到。 (如果 p 是发生在 pm 和pn次分
XMPPFramework为“意外断开连接”提供名为 XMPPReconnect 的扩展并自动重新连接流。 这在正常连接的设置上效果很好: [xmppStream connect:&error] [x
我正在做一些关于 yield 返回性能的测试，我发现它比正常返回慢。 我测试了值变量(int、double 等)和一些引用类型(string 等)...并且在这两种情况下 yield return 都
我对使用套接字还很陌生，并且正在从事我的第一个项目；我实际上完全打算在没有任何库的情况下完成其中的第一个。我在 Windows 7 上，仅使用 WinAPI。 我在学校部分地研究它，在我的学校他们有一
因此，据我所知，几乎所有与 IE 兼容的拖放操作都使用定位来确定将某些内容放置在何处。做一些类似 mousedown 的事情，确定所有可放置的位置，mouseup 确定我们是否处于可放置的位置。为什么
我正在为学校项目构建一个非常基本的数据库，但在 MySQL 中出现“无法添加外键约束”错误。在过去的一天里，我一直在为这个问题摸不着头脑，阅读了所有相关的帖子，但一直无法弄清楚。 这是我项目的前两个表
我想在 Azure Multi-Tenancy 环境中针对 Microsoft 帐户和“工作或学校”帐户进行身份验证。每种身份验证类型需要不同的请求。如果我尝试针对“工作或学校”请求以 Microso
在 Noda Time 1.3.1、我们的.csproj文件引用了配置文件 328 和我们的 .nuspec文件将结果放入 lib\portable-net4+sl5+netcore45+wpa81+
我是一名优秀的程序员,十分优秀！