Javascript 指示其他选项卡上的内容何时更改

我有多个选项卡，但我想指出用户没有单击的另一个选项卡何时发生更改。例如，当用户在数据窗格上点击运行按钮时，我想使

错误
选项卡变为红色，以指示该选项卡也发生了更改-我如何实现这一点？（相反，如果它们位于错误选项卡上，则数据选项卡应变为红色）。此外，一旦点击了标签，我想删除红色。感谢您的帮助

期望输出


runCode=（）=>{
document.getElementById（“dataOutput”）.innerHTML=“段落已更改！”
document.getElementById（“errorOutput”）.innerHTML=“发生错误”
}
.fab{
宽度：60px；
高度：60px；
背景色：#A7C0CD；
边界半径：50%；
盒影：0px 3px 15px rgba（0,0,0,0.2）；
过渡：所有0.1都易于输入输出；
字体大小：15px；
字体系列：-苹果系统，BlinkMacSystemFont，'Segoe UI'，Roboto，Oxygen，Ubuntu，Cantarell，'Open Sans'，'Helvetica Neue'，Sans serif；
颜色：白色；
文本对齐：居中；
线高：58px；
浮动：对；
利润率：8px；
z指数：5000；
位置：绝对位置；
右：0；
排名：0；
}
.fab:悬停{
盒影：0px 3px 15px rgba（0,0,0,0.2）；
转换：标度（1.05）；
}

跑




如何执行此操作的示例：


runCode=（）=>{
document.getElementById（“dataOutput”）.innerHTML=“段落已更改！”
document.getElementById（“errorOutput”）.innerHTML=“发生错误”
document.querySelector（“li:not（.active）>a”）.style.color=“Red”
}
.fab{
宽度：60px；
高度：60px；
背景色：#A7C0CD；
边界半径：50%；
盒影：0px 3px 15px rgba（0,0,0,0.2）；
过渡：所有0.1都易于输入输出；
字体大小：15px；
字体系列：-苹果系统，BlinkMacSystemFont，'Segoe UI'，Roboto，Oxygen，Ubuntu，Cantarell，'Open Sans'，'Helvetica Neue'，Sans serif；
颜色：白色；
文本对齐：居中；
线高：58px；
浮动：对；
利润率：8px；
z指数：5000；
位置：绝对位置；
右：0；
排名：0；
}
.fab:悬停{
盒影：0px 3px 15px rgba（0,0,0,0.2）；
转换：标度（1.05）；
}

跑




我想我用
MutationObserver
s实现了你想要的。它相当脆弱，可能需要一些重构，但我希望你能理解这一点：


//在重复使用选项卡时存储对选项卡的引用
const data=document.getElementById（“数据输出”）；
const error=document.getElementById（“errorOutput”）；
常量运行代码=（）=>{
data.textContent=“段落已更改！”；
error.textContent=“发生错误”；
};
//从单击的选项卡中删除“已更改”类
const tabs=document.querySelector（“.nav tabs”）；
tabs.onclick=（{target}）=>target.classList.remove（'changed'）；
//我们将观察输出元素的突变
新的MutationObserver（observe）.observe（数据，{childList:true}）；
新建MutationObserver（observe）.observe（错误，{childList:true}）
功能观察（突变）{
常量目标=突变[0]。目标；
//通过对目标id中的“输出”进行切片，获取已更改选项卡的名称
const tabName=target.id.slice（0，target.id.indexOf（'O'）；
const tab=document.querySelector（`a[href=“#${tabName}]”）；
//将“changed”类赋予与更改的dom节点相关的选项卡，
//如果它当前未处于活动状态
如果（！target.parentNode.classList.contains（'active'））{
tab.classList.add（'changed'）；
}
}

.fab{
宽度：60px；
高度：60px；
背景色：#A7C0CD；
边界半径：50%；
盒影：0px 3px 15px rgba（0,0,0,0.2）；
过渡：所有0.1都易于输入输出；
字体大小：15px；
字体系列：-苹果系统，BlinkMacSystemFont，'Segoe UI'，Roboto，Oxygen，Ubuntu，Cantarell，'Open Sans'，'Helvetica Neue'，Sans serif；
颜色：白色；
文本对齐：居中；
线高：58px；
浮动：对；
利润率：8px；
z指数：5000；
位置：绝对位置；
右：0；
排名：0；
}
.fab:悬停{
盒影：0px 3px 15px rgba（0,0,0,0.2）；
转换：标度（1.05）；
}
a、 改变{
颜色：红色
}

跑




使用JQuery:
$（“a[href=”#error']）.css（“颜色”、“红色”）与纯JS:
document.queryselectoral（“[href=”#error']”）。style.color=“red”
我建议您提供选项卡的id或类名。感谢您的响应-但是如果用户在错误选项卡上，那么我希望数据选项卡变为红色…好的，我可以调整我的答案谢谢您的输入，我不想硬编码错误选项卡为红色，因为如果用户被导航到错误选项卡，然后我想让数据选项卡变成红色-这有意义吗？这看起来如何，如果在其中一个选项卡上运行它，另一个会变成红色