Javascript Div类默认选项卡

我正在使用w3school文章在我的程序中使用tablinks

CSS

函数openCity（evt，cityName）{
//声明所有变量
var i，tabcontent，tablinks；
//使用class=“tabcontent”获取所有元素并隐藏它们
tabcontent=document.getElementsByClassName（“tabcontent”）；
对于（i=0；i

/*设置选项卡的样式*/
.标签{
溢出：隐藏；
边框：1px实心#ccc；
背景色：#f1f1；
}
/*设置用于打开选项卡内容的按钮的样式*/
.选项卡按钮{
背景色：继承；
浮动：左；
边界：无；
大纲：无；
光标：指针；
填充：14px 16px；
过渡：0.3s；
}
/*更改悬停按钮的背景色*/
.tab按钮：悬停{
背景色：#ddd；
}
/*创建活动/当前tablink类*/
.tab按钮。激活{
背景色：#ccc；
}
/*设置选项卡内容的样式*/
.tabcontent{
显示：无；
填充：6px 12px；
边框：1px实心#ccc；
边界顶部：无；
}

伦敦
巴黎
东京
伦敦
伦敦是英国的首都

巴黎
巴黎是法国的首都。

东京
东京是日本的首都

根据您链接的文章，看起来css控制着显示哪个选项卡

这段摘录自他们稍后的示例页面

    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";

因此，如果您想管理哪个选项卡和页面是活动的，您将需要使用Javascript管理该活动类，就像他们在示例页面上处理函数一样

使用他们的示例，我可以通过调用以下命令来更改显示的选项卡：

    document.getElementById("Tokyo").style.display = "block";
    var tokyo = document.getElementsByClassName("tablinks")
    tokyo[2].className += " active";

---

您需要在单击选项卡时存储这些选项卡，然后在页面加载时打开这些选项卡。查看

window.localStorage

：localStorage.setItem（“divid”，cityName）；document.getElementById（localStorage.getItem（“divid”））。单击（）；不工作很遗憾：（无法理解