两个按钮内有不同的选项卡。”按钮1“有3个选项卡，“按钮2”有3个选项卡。我希望在单击任一按钮时，特定按钮的第一个选项卡及其内容作为默认打开。以下代码中有两个问题需要解决：
“button2”功能不会打开其默认选项卡内容。
当其他按钮中的选项卡内容打开时，然后单击“按钮1”，其默认内容不会打开。
我是网络开发新手。我想知道如何使用html、css和javascript解决这个问题。

function OpenBtnContent(pageName, elmnt, color) {
  var i, btnContent, mainbuttons;
  btnContent = document.getElementsByClassName("btnContent");
  for (i = 0; i < btnContent.length; i++) {
    btnContent[i].style.display = "none";
  }
  mainbuttons = document.getElementsByClassName("mainbutton");
  for (i = 0; i < mainbuttons.length; i++) {
    mainbuttons[i].style.backgroundColor = "";
  }
  document.getElementById(pageName).style.display = "block";
  elmnt.style.backgroundColor = color;
}
document.getElementById("defaultOpen").click();
document.getElementById("defaultOpen1").click();

function openCity1(cityName1, elmnt, color) {
  var i, tabcontent, btn1tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  btn1tablinks = document.getElementsByClassName("btn1tablink");
  for (i = 0; i < btn1tablinks.length; i++) {
    btn1tablinks[i].style.display = "";
  }
  document.getElementById(cityName1).style.display = "block";
  elmnt.style.backgroundColor = color;
}

function openCity2(cityName2, elmnt, color) {
  var i, tabcontent, btn2tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  btn2tablinks = document.getElementsByClassName("btn2tablink");
  for (i = 0; i < btn2tablinks.length; i++) {
    btn2tablinks[i].style.backgroundColor = "";
  }
  document.getElementById(cityName2).style.display = "block";
  elmnt.style.backgroundColor = color;
}

body {
  font-family: Arial;
}

.mainbutton {
  background-color: #777;
  border: none;
  color: #ffffff;
  padding: 10px 30px;
  font-family: "Montserrat", sans-serif;
  font-size: .8rem;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  cursor: pointer;
  transition: all 0.3s;
  outline-color: #777;
  width: 120px;
}

.mainbutton:active {
  background-color: #2157A3;
  transform: scale(1.1);
  border-radius: 0px;
}

/* 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;
  align-items: center;
}

.btn1tablink,
.btn2tablink {
  background-color: grey;
  color: white;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 10px 15px;
  font-size: 1rem;
  font-family: "Montserrat", sans-serif;
  height: 60px;
  text-align: center;
  width: 20%;
  transition: all 0.3s;
  margin-bottom: 20px;
  margin-top: 20px;
}

.btn1tablink:hover,
.btn2tablink {
  background-color: #777;
}

.btn1tablink {
  background-color: #a1a1a1;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

<div class="btns">
  <h2>Tabs</h2>
  <p>Click on the buttons inside the tabbed menu:</p>
  <button class="mainbutton" onclick="OpenBtnContent('btn1', this, '#2157A3')" id="defaultOpen">Button1</button>
  <button class="mainbutton" onclick="OpenBtnContent('btn2', this, '#2157A3')">Button2</button>
</div>

<div id="btn1" class="btnContent">
  <button class="btn1tablink" onclick="openCity1( 
   'London',this,'grey')" id="defaultOpen1">London</button>
  <button class="btn1tablink" onclick="openCity1( 'Paris',this,'grey')">Paris</button>
  <button class="btn1tablink" onclick="openCity1( 'Tokyo',this,'grey')">Tokyo</button>
  <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>
</div>
<div id="btn2" class="btnContent">
  <button class="btn2tablink" onclick="openCity2('Austria',this,'grey')" id="defaultOpen2">Austria</button>
  <button class="btn2tablink" onclick="openCity2('Los Angles',this,'grey')">Los 
    Angles</button>
  <button class="btn2tablink" onclick="openCity2('Toronto',this,'grey')">Toronto</button>
  <div id="Austria" class="tabcontent">
    <h3>Austria</h3>
    <p>Austria is a country in Europe.</p>
  </div>
  <div id="Los Angles" class="tabcontent">
    <h3>Los Angles</h3>
    <p>Los Angles is a city in California.</p>
  </div>
  <div id="Toronto" class="tabcontent">
    <h3>Toronto</h3>
    <p>Toronto is t