如何动态为导航菜单项添加Popover提示

需求回顾 #

页面加载时需判断经验数据是否存在：

• 若无经验数据：给导航中id="experience"的<li>添加粉色背景，同时为其下的<a>标签配置Popover属性（禁用跳转、显示空数据提示）
• 若有经验数据：保持导航菜单原有状态

完整实现代码 #

替换你现有脚本即可，以下是完整的jQuery实现：

$(document).ready(function () {
    // 获取经验数据表格的行数（若表格包含表头，可根据实际情况调整判断逻辑）
    var $gridView = $("#ctl03_gridExperience");
    var rowCount = $gridView.find("tr").length;

    // 定位目标菜单元素
    var $experienceLi = $("#experience");
    var $experienceLink = $experienceLi.find("a.section-link");

    if (rowCount === 0) {
        // 给<li>添加粉色背景
        $experienceLi.css("background-color", "pink");
        // 给<a>添加额外样式类
        $experienceLink.addClass("popover-link-a");
        // 配置Popover所需属性
        $experienceLink.attr({
            "data-toggle": "popover",
            "title": "Work experience",
            "data-content": "Work Exp is empty !",
            "onclick": "javascript:return false;"
        });
        // 初始化Bootstrap Popover组件（必须执行才能生效）
        $experienceLink.popover({
            placement: "right", // 可按需调整弹出位置
            trigger: "hover focus" // 触发方式：鼠标悬停或聚焦时显示
        });
    } else {
        // 重置可能残留的无数据状态（可选，防止动态刷新时的状态干扰）
        $experienceLi.removeAttr("style");
        $experienceLink.removeClass("popover-link-a")
                      .removeAttr("data-toggle title data-content onclick");
        // 销毁已存在的Popover实例
        if ($experienceLink.data("bs.popover")) {
            $experienceLink.popover("dispose");
        }
    }
});

关键优化点说明 #

1. 精准元素定位：直接通过id="experience"定位目标<li>，避免遍历所有.section-link并匹配文本的冗余操作，同时规避文本大小写/空格导致的匹配失败问题
2. 完整属性配置：一次性添加Popover所需的所有data-*属性，同时配置onclick阻止跳转
3. Popover初始化：Bootstrap的Popover组件必须手动初始化才能生效，这里补充了初始化逻辑并配置了弹出位置和触发方式
4. 状态重置：在有数据的分支中添加状态重置代码，防止页面动态刷新（如AJAX更新数据）时残留无数据状态的样式和属性

注意事项 #

• 确保页面已引入Bootstrap的CSS和JS文件（Popover依赖Bootstrap的Tooltip组件）
• 若你的GridView表头会被计入<tr>数量，可将判断逻辑调整为rowCount <= 1（假设表头占1行）

内容的提问来源于stack exchange，提问作者Haluk Öztürk