使用Javascript和选项卡更改页面内容

我正在尝试创建某种脚本，当我转到新选项卡时，它将更改某些文本。我对Javascript和带有HTML和CSS的okayish很在行

以下是到目前为止我工作的链接：

正文{字体系列：“Lato”，无衬线；}
.tablink{
背景色：#555；
颜色：白色；
浮动：左；
边界：无；
大纲：无；
光标：指针；
填充：14px 16px；
字号：17px；
宽度：25%；
}
.tablink:悬停{
背景色：#777；
}
/*设置选项卡内容的样式*/
.tabcontent{
颜色：白色；
显示：无；
填充：50px；
文本对齐：居中；
}
#伦敦{背景色：红色；}
#巴黎{背景色：绿色；}
#东京{背景色：蓝色；}
#奥斯陆{背景色：橙色；}
伦敦
伦敦是英国的首都

巴黎
巴黎是法国的首都。

东京
东京是日本的首都

奥斯陆
奥斯陆是挪威的首都

伦敦
巴黎
东京
奥斯陆

这篇文章就在这里

函数openCity（城市名称、elmnt、颜色）{
var i，tabcontent，tablinks；
tabcontent=document.getElementsByClassName（“tabcontent”）；
对于（i=0；i

正如你所看到的，我用标签处理文本。我需要根据单击的选项卡更改“此处的文本”。 我还将为“此处的文本”创建一个预设字体

---

任何帮助都将不胜感激

您可以为要显示的每个文本块创建一个元素，向其中添加一个与其关联的

cityName

匹配的类，当您单击选项卡时，显示其类中包含

cityName

的文本块，并隐藏其余部分

正文{字体系列：“Lato”，无衬线；}
.tablink{
背景色：#555；
颜色：白色；
浮动：左；
边界：无；
大纲：无；
光标：指针；
填充：14px 16px；
字号：17px；
宽度：25%；
}
.tablink:悬停{
背景色：#777；
}
/*设置选项卡内容的样式*/
.tabcontent{
颜色：白色；
显示：无；
填充：50px；
文本对齐：居中；
}
#伦敦{背景色：红色；}
#巴黎{背景色：绿色；}
#东京{背景色：蓝色；}
#奥斯陆{背景色：橙色；}
.文本{
显示：无；
}
.表演{
显示：块；
}
伦敦
伦敦是英国的首都

巴黎
巴黎是法国的首都。

东京
东京是日本的首都

奥斯陆
奥斯陆是挪威的首都

伦敦
巴黎
东京
奥斯陆

奥斯陆


巴黎


东京


伦敦

函数openCity（城市名称、elmnt、颜色）{
var i，tabcontent，tablinks；
tabcontent=document.getElementsByClassName（“tabcontent”）；
对于（i=0；i

向要更改的元素添加id，例如

，然后添加以下内容：

document.getElementById('test').innerHTML = cityName;

之后：

document.getElementById(cityName).style.display = "block";
elmnt.style.backgroundColor = color;

这将用城市名称替换文本。希望您可以根据自己的需要进一步定制。

尝试以下方法：

正文{字体系列：“Lato”，无衬线；}
.tablink{
背景色：#555；
颜色：白色；
浮动：左；
边界：无；
大纲：无；
光标：指针；
填充：14px 16px；
字号：17px；
宽度：25%；
}
.tablink:悬停{
背景色：#777；
}
/*设置选项卡内容的样式*/
.tabcontent{
颜色：白色；
显示：无；
填充：50px；
文本对齐：居中；
}
#伦敦{背景色：红色；}
#巴黎{背景色：绿色；}
#东京{背景色：蓝色；}
#奥斯陆{背景色：橙色；}
伦敦
伦敦是英国的首都

巴黎
巴黎是法国的首都。

东京
东京是日本的首都

奥斯陆
奥斯陆是挪威的首都

伦敦
巴黎
东京
奥斯陆

我需要更改此文本

函数openCity（城市名称、elmnt、颜色）{
var i，tabcontent，tablinks；
tabcontent=document.getElementsByClassName（“tabcontent”）；
对于（i=0；i

有很多方法可以做到这一点。既然您没有提到要对文本进行什么更改，我就假设

中的文本是任意字符串。你可以登广告

document.getElementById(cityName).style.display = "block";
elmnt.style.backgroundColor = color;

function changeText(newText) {
  let text = document.getElementById('text');
  text.innerHTML = newText;
};

function handleTabClick(cityName, elmnt, color, newText) {
  openCity(cityName, elmnt, color);
  changeText(newText);
}