如何使用 HTML、CSS 和 JavaScript 在加载时让多个选项卡式部分打开第一个选项卡? [英] How to have multiple tabbed sections open the first tab on load using HTML, CSS, and JavaScript?

查看：17
本文介绍了如何使用 HTML、CSS 和 JavaScript 在加载时让多个选项卡式部分打开第一个选项卡?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在我的网页中添加了多个选项卡式部分，但我无法确保第二个选项卡式部分在加载时也打开第一个选项卡.我目前正在关注 W3Schools 的 this 教程，这是我目前在 W3Schools 上的代码:

body {font-family: Arial;}/* 设置标签样式 */.标签 {溢出:隐藏；边框:1px 实心 #ccc；背景色:#f1f1f1；}/* 设置选项卡内按钮的样式 */.tab 按钮 {背景色:继承；向左飘浮;边界:无；大纲:无；光标:指针；填充:14px 16px；过渡:0.3s；字体大小:17px；}/* 更改悬停按钮的背景颜色 */.tab 按钮:悬停 {背景色:#ddd;}/* 创建一个活动/当前标签链接类 */.tab button.active {背景颜色:#ccc；}/* 设置标签内容的样式 */.tabcontent {显示:无；填充:6px 12px；边框:1px 实心 #ccc；边框顶部:无；}

<p>在这个例子中，我们使用 JavaScript 来点击"伦敦按钮，在页面加载时打开标签.</p><!--第一个选项卡--><div class="tab"><button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button><button class="tablinks" onclick="openCity(event, 'Paris')">巴黎</button><button class="tablinks" onclick="openCity(event, 'Tokyo')">东京</button>

<div id="London" class="tabcontent"><h3>伦敦</h3><p>伦敦是英格兰的首都.</p>

<div id="Paris" class="tabcontent"><h3>巴黎</h3><p>巴黎是法国的首都.</p>

<div id="东京" class="tabcontent"><h3>东京</h3><p>东京是日本的首都.</p>

<br><br><br><br><br><!--第二个标签--><div class="tab"><button class="tablinks" onclick="openCity(event, '1')" id="defaultOpen">London</button><button class="tablinks" onclick="openCity(event, '2')">巴黎</button><button class="tablinks" onclick="openCity(event, '3')">东京</button>

<div id="1" class="tabcontent"><h3>东京</h3><p>东京是日本的首都.</p>

<脚本>函数 openCity(evt, cityName) {var i, tabcontent, tablinks;tabcontent = document.getElementsByClassName("tabcontent");for (i = 0; i

我已经设法在第一个选项卡下方创建了第二个选项卡式部分，但我无法让两个选项卡式部分同时显示页面加载时的第一个选项卡.

解决方案

对城市使用类名而不是 id.为活动内容添加一个show"类名:

function openCity(evt, cityName) {var i, tabcontent, tablinks;tabcontent = document.getElementsByClassName("tabcontent");for (var i = 0; i < tabcontent.length; i++) {tabcontent[i].classList.remove('show');}tablinks = document.getElementsByClassName("tablinks");for (var i = 0; i 

.tab {溢出:隐藏；边框:1px 实心 #ccc；背景色:#f1f1f1；}/* 设置选项卡内按钮的样式 */.tab 按钮 {背景色:继承；向左飘浮;边界:无；大纲:无；光标:指针；填充:14px 16px；过渡:0.3s；字体大小:17px；}/* 更改悬停按钮的背景颜色 */.tab 按钮:悬停 {背景色:#ddd;}/* 创建一个活动/当前标签链接类 */.tab button.active {背景颜色:#ccc；}/* 设置标签内容的样式 */.tabcontent {显示:无；填充:6px 12px；边框:1px 实心 #ccc；边框顶部:无；}.tabcontent.show {显示:块；}

<p>在这个例子中，我们使用 JavaScript 来点击"伦敦按钮，在页面加载时打开标签.</p><!--第一个选项卡--><div class="tab"><button class="tablinks l" onclick="openCity(event, 'london')" id="defaultOpen">London</button><button class="tablinks p" onclick="openCity(event, 'paris')">巴黎</button><button class="tablinks t" onclick="openCity(event, 'tokyo')">东京</button>

<div class="tabcontent london"><h3>伦敦</h3><p>伦敦是英格兰的首都.</p>

<div class="tabcontent paris"><h3>巴黎</h3><p>巴黎是法国的首都.</p>

<div class="tabcontent tokyo"><h3>东京</h3><p>东京是日本的首都.</p>

<br><br><br><br><br><!--第二个标签--><div class="tab"><button class="tablinks l" onclick="openCity(event, 'london')">伦敦</button><button class="tablinks p" onclick="openCity(event, 'paris')">巴黎</button><button class="tablinks t" onclick="openCity(event, 'tokyo')">东京</button>

<div class="tabcontent london"><h3>伦敦</h3><p>伦敦是英格兰的首都.</p>

<div class="tabcontent paris"><h3>巴黎</h3><p>巴黎是法国的首都.</p>

<div class="tabcontent tokyo"><h3>东京</h3><p>东京是日本的首都.</p>

I have added multiple tabbed sections to my webpage but I am having trouble making sure the second tabbed section also opens up the first tab on load. I am currently following this tutorial from W3Schools and this is my code on W3Schools so far:

body {font-family: Arial;}

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

<p>In this example, we use JavaScript to "click" on the London button, to open the tab on page load.</p>

<!--first tab-->

<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

<br><br><br><br><br>

<!--second tab-->

<div class="tab">
  <button class="tablinks" onclick="openCity(event, '1')" id="defaultOpen">London</button>
  <button class="tablinks" onclick="openCity(event, '2')">Paris</button>
  <button class="tablinks" onclick="openCity(event, '3')">Tokyo</button>
</div>

<div id="1" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

<script>
function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>

I have managed to create a second tabbed section underneath the first one but I cannot get both tabbed sections to show the first tab on page load at the same time.

解决方案

Use class-names instead of ids for cityes. Add a "show" class-name to the active content:

function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (var i = 0; i < tabcontent.length; i++) {
    tabcontent[i].classList.remove('show');
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (var i = 0; i < tablinks.length; i++) {
    tablinks[i].classList.remove('active');
  }
  document.getElementsByClassName(cityName)[0].classList.add('show');
  document.getElementsByClassName(cityName)[1].classList.add('show');
  var cuttentTabClass = evt.currentTarget.className.split(" ")[1];
  console.log(cuttentTabClass);
  document.getElementsByClassName(cuttentTabClass)[0].classList.add('active');
  document.getElementsByClassName(cuttentTabClass)[1].classList.add('active');
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
.tabcontent.show {
	display: block;
}

<p>In this example, we use JavaScript to "click" on the London button, to open the tab on page load.</p>

<!--first tab-->

<div class="tab">
  <button class="tablinks l" onclick="openCity(event, 'london')" id="defaultOpen">London</button>
  <button class="tablinks p" onclick="openCity(event, 'paris')">Paris</button>
  <button class="tablinks t" onclick="openCity(event, 'tokyo')">Tokyo</button>
</div>

<div class="tabcontent london">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div class="tabcontent paris">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div class="tabcontent tokyo">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

<br><br><br><br><br>

<!--second tab-->

<div class="tab">
  <button class="tablinks l" onclick="openCity(event, 'london')">London</button>
  <button class="tablinks p" onclick="openCity(event, 'paris')">Paris</button>
  <button class="tablinks t" onclick="openCity(event, 'tokyo')">Tokyo</button>
</div>

<div class="tabcontent london">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div class="tabcontent paris">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div class="tabcontent tokyo">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

这篇关于如何使用 HTML、CSS 和 JavaScript 在加载时让多个选项卡式部分打开第一个选项卡?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆