Javascript 强制选项卡导航中的div显示在所有其他页面内容的顶部_Javascript_Html_Css

Javascript 强制选项卡导航中的div显示在所有其他页面内容的顶部

javascript html css

Javascript 强制选项卡导航中的div显示在所有其他页面内容的顶部,javascript,html,css,Javascript,Html,Css,我使用的是模板，所以我只能编辑环境中的大部分内容。我设置了一个选项卡式导航。在其中一个选项卡中，我有一个div，我希望它有一个固定的位置，位于页面上所有其他内容的外部/顶部这不是我正在使用的实际代码，但它非常相似，我可以将其用作示例。“outsidediv”分区被放置在“London”分区中。但是我想让它成为这样，即使您点击巴黎或东京选项卡，也可以看到outsidediv 我尝试过使用z索引和我能想到的各种位置属性来实现这一点。我不能把外面的人挪开 .tab{ 溢出：隐藏；边框：1px实心

我使用的是模板，所以我只能编辑环境中的大部分内容。我设置了一个选项卡式导航。在其中一个选项卡中，我有一个div，我希望它有一个固定的位置，位于页面上所有其他内容的外部/顶部

这不是我正在使用的实际代码，但它非常相似，我可以将其用作示例。“outsidediv”分区被放置在“London”分区中。但是我想让它成为这样，即使您点击巴黎或东京选项卡，也可以看到outsidediv

我尝试过使用z索引和我能想到的各种位置属性来实现这一点。我不能把外面的人挪开

.tab{
溢出：隐藏；
边框：1px实心#ccc；
背景色：#f1f1；
}
.选项卡按钮{
背景色：继承；
浮动：左；
边界：无；
大纲：无；
光标：指针；
填充：14px 16px；
过渡：0.3s；
字号：17px；
}
.tab按钮：悬停{
背景色：#ddd；
}
.tab按钮。激活{
背景色：#ccc；
}
.tabcontent{
显示：无；
填充：6px 12px；
边框：1px实心#ccc；
边界顶部：无；
}
#室外师{
位置：固定；
顶部：80px；
右：50px；
背景：粉红色；
}


伦敦
巴黎
东京
伦敦
伦敦是英国的首都
无论选择哪个选项卡，都应显示此div。
巴黎
巴黎是法国的首都。
东京
东京是日本的首都
函数openCity（evt、cityName）{
var i，tabcontent，tablinks；
tabcontent=document.getElementsByClassName（“tabcontent”）；
对于（i=0；i

我不知道除了移动

div

使其位于选项卡之外还有什么其他方法可以做到这一点，并给它一个非常高的

z-index

，因为一旦你用

显示隐藏了一个选项卡：none

整个选项卡（及其子体）将不会被渲染

如果无法修改HTML模板结构，可以使用JavaScript将其移动到以下一行：

document.body.appendChild(document.getElementById("outsidediv"));

我还修改/更新了您现有的JavaScript代码，使之更加高效，并且更加符合现代开发方法。有关详细信息，请参见代码中的注释

/*要隐藏某些内容时，只需添加此类
并在需要显示时删除*/
.hidden{显示：无；}
.标签{
溢出：隐藏；
边框：1px实心#ccc；
背景色：#f1f1；
}
.选项卡按钮{
背景色：继承；
浮动：左；
边界：无；
大纲：无；
光标：指针；
填充：14px 16px；
过渡：0.3s；
字号：17px；
}
.tab按钮：悬停{
背景色：#ddd；
}
.tab按钮。激活{
背景色：#ccc；
}
.tabcontent{
填充：6px 12px；
边框：1px实心#ccc；
边界顶部：无；
}
#室外师{
位置：固定；
z指数：9999；
顶部：80px；
右：50px；
背景：粉红色；
}


伦敦
巴黎
东京
伦敦
伦敦是英国的首都
无论选择哪个选项卡，都应显示此div。
巴黎
巴黎是法国的首都。
东京
东京是日本的首都
//将应该位于顶部的div移动到tab div之后
document.body.appendChild（document.getElementById（“outsidediv”）；
//只需在按钮的父级设置事件
//并使用事件委派来利用事件冒泡
document.querySelector（“.tab”）.addEventListener（“单击”，openCity）；
功能开放城市（活动）{
//永不，永不，永不使用`getElementsByClassName（）`
//而是使用“.querySelectorAll（）”。您可以
//然后使用
//`.forEach（）`，这使得循环没有索引
//可能的
//隐藏所有制表符内容
document.queryselectoral（“.tabcontent”）.forEach（函数（tab）{
//尽可能避免内联样式，只应用/删除类
tab.classList.add（“隐藏”）；
});
//删除活动选项卡
document.querySelectorAll（“.tablinks”）.forEach（函数（tabLink）{
tabLink.classList.remove（“活动”）；
});
//再次循环内容
document.queryselectoral（“.tabcontent”）.forEach（函数（tab）{
//如果单击按钮的文本与选项卡标题的文本匹配。。。
if（event.target.textContent==tab.querySelector（“h3”）.textContent）{
tab.classList.remove（“hidden”）；//取消隐藏选项卡内容
event.target.classList.add（“active”）；//激活选项卡
}
});
}