FiveM(GTA)应急应用onclick触发页面显示异常JavaScript修复求助

核心原因是需要点击触发才显示的各救援服务子页面，没有设置默认隐藏的样式，所以应用加载展示时，子页面会直接同步显示。

步骤1：新增CSS规则，设置子页面默认隐藏 #

在你的CSS文件中添加以下代码，确保所有子页面初始状态为隐藏：

/* 所有救援服务子页面默认隐藏 */
.emergency-policeapp-tab, 
.emergency-ambulanceapp-tab, 
.emergency-mechanicapp-tab, 
.emergency-fireapp-tab {
    display: none;
}

如果后续新增其他子页面，只需在上述选择器中追加对应类名即可。

步骤2（可选）：优化JS交互逻辑，避免多页面重叠 #

现有JS逻辑未处理切换Tab的场景，点击不同救援选项会出现多个子页面重叠的问题，可替换为以下优化后的代码：

MI.Phone.Settings = {};
MI.Phone.Settings.OpenedTab = null;

var PressedBackground = null;
var IsChecked = null;

$(document).on('click', '.emergency-app-tab', function(e){
    e.preventDefault();
    var PressedTab = $(this).data("emergencytab");
    // 先关闭当前已经打开的子页面
    if (MI.Phone.Settings.OpenedTab !== null) {
        MI.Phone.Animations.TopSlideUp(".emergency-"+MI.Phone.Settings.OpenedTab+"-tab", 200, -100);
    }
    // 打开当前点击的对应子页面，适配所有救援类型
    const supportTabs = ["policeapp", "ambulanceapp", "mechanicapp", "fireapp"]
    if (supportTabs.includes(PressedTab)) {
        MI.Phone.Animations.TopSlideDown(".emergency-"+PressedTab+"-tab", 200, 0);
        MI.Phone.Settings.OpenedTab = PressedTab;
    }
});

完成上述修改后，打开应用时只会显示救援选项列表，点击对应选项才会加载显示对应的子页面。

内容的提问来源于stack exchange，提问作者Patrick Stek