如何在javascript中激活选项卡内容？_Javascript

如何在javascript中激活选项卡内容？

javascript

如何在javascript中激活选项卡内容？,javascript,Javascript,如何在打开页面时激活London选项卡内容我曾尝试将类设置为“活动”，但没有效果以下是脚本： <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body {font-family: Arial;} /* Style the tab */ .tab { overflow: hidden; border:

如何在打开页面时激活

London

选项卡内容

我曾尝试将类设置为“活动”，但没有效果

以下是脚本：

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
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;
}
</style>
</head>
<body>

<p>Click on the buttons inside the tabbed menu:</p>

<div class="tab">
  <button class="tablinks active" onclick="openCity(event, 'London')">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>

<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";
}
 </script>

</body>
</html>


正文{字体系列：Arial；}
/*设置选项卡的样式*/
.标签{
溢出：隐藏；
边框：1px实心#ccc；
背景色：#f1f1；
}
/*设置选项卡内按钮的样式*/
.选项卡按钮{
背景色：继承；
浮动：左；
边界：无；
大纲：无；
光标：指针；
填充：14px 16px；
过渡：0.3s；
字号：17px；
}
/*更改悬停按钮的背景色*/
.tab按钮：悬停{
背景色：#ddd；
}
/*创建活动/当前tablink类*/
.tab按钮。激活{
背景色：#ccc；
}
/*设置选项卡内容的样式*/
.tabcontent{
显示：无；
填充：6px 12px；
边框：1px实心#ccc；
边界顶部：无；
}
单击选项卡式菜单内的按钮：
伦敦
巴黎
东京
伦敦
伦敦是英国的首都
巴黎
巴黎是法国的首都。
东京
东京是日本的首都
函数openCity（evt、cityName）{
var i，tabcontent，tablinks；
tabcontent=document.getElementsByClassName（“tabcontent”）；
对于（i=0；i


我的剧本来自：
感谢纯JS解决方案：换行
evt.currentTarget.className += " active";

到
在脚本底部（结束标记上方的一行）放置
就这些。但是，您根本不需要使用JS-查看@AndrewL。
只需在默认情况下手动将display:block
添加到London
选项卡，然后让JS切换显示属性本身，如下所示：
<div id="London" class="tabcontent" style="display: block;">


jsFiddle:
如果您这样做，您将得到一个错误，因为该代码正在使用event.target，并且您正在将其设置为null
是，显然当您更改选项卡时，您无法返回伦敦。感谢您的回复和更新@KamilKiełczewski，我非常感谢！你可以点击左边灰色的“向上”三角形，将我的答案投上一票。很高兴我能帮上忙。如果这有助于您解决问题，请将其标记为正确答案。此外，我还添加了一个js方法，将display:block添加到您的伦敦选项卡，以防您需要一个纯js方法来解决这个问题。但是html方法也很好，我在这件事上使用html方法。无论哪种方式，它们都能完美地发挥魅力。再次感谢您的回复@AndrewL！
openCity(null, 'London');

<div id="London" class="tabcontent" style="display: block;">

var londonTab = document.getElementById("London");
londonTab.style.display = "block";