如何实现点击关联图片时才显示SharePoint 2013对应Web部件？

Hey Tonya, 这个需求我之前帮不少客户实现过，用SharePoint自带的jQuery就能搞定，不用搞复杂的解决方案。下面给你一步步拆解：

第一步：给元素标记唯一标识 #

要让JS能准确找到对应的图片和Web部件，得给它们加专属的CSS类名：

• 图片标记：编辑每张图片的属性，在「高级」选项里的「CSS类」字段，分别填入 img-trigger-1、img-trigger-2、img-trigger-3、img-trigger-4（对应4张图片）。
• Web部件标记：编辑每个目标Web部件，在「外观」选项里的「CSS类名」字段，分别填入 wp-target-1、wp-target-2、wp-target-3、wp-target-4（对应4个Web部件）。

小提示：如果找不到Web部件的「CSS类名」选项，记得勾选「高级模式」（在Web部件编辑面板的右上角）。

第二步：编写切换逻辑的JavaScript代码 #

SharePoint 2013页面默认已经加载了jQuery，所以直接写代码就行。你可以把代码放在内容编辑器Web部件里，步骤如下：

1. 在页面底部添加一个内容编辑器Web部件（避免影响页面布局）。
2. 编辑这个Web部件，点击「编辑HTML源」，把下面的代码粘贴进去：

// 确保SharePoint DOM完全加载后执行
function initWpToggle() {
    // 默认隐藏所有目标Web部件
    $('.wp-target-1, .wp-target-2, .wp-target-3, .wp-target-4').hide();

    // 封装隐藏所有Web部件的函数，减少重复代码
    function hideAllWps() {
        $('.wp-target-1, .wp-target-2, .wp-target-3, .wp-target-4').hide();
        // 移除所有图片的高亮状态（可选）
        $('.img-trigger-1, .img-trigger-2, .img-trigger-3, .img-trigger-4').removeClass('active-img');
    }

    // 图片1点击事件
    $('.img-trigger-1').click(function() {
        hideAllWps();
        $('.wp-target-1').show();
        $(this).addClass('active-img'); // 给当前点击的图片加高亮（可选）
    });

    // 图片2点击事件
    $('.img-trigger-2').click(function() {
        hideAllWps();
        $('.wp-target-2').show();
        $(this).addClass('active-img');
    });

    // 图片3点击事件
    $('.img-trigger-3').click(function() {
        hideAllWps();
        $('.wp-target-3').show();
        $(this).addClass('active-img');
    });

    // 图片4点击事件
    $('.img-trigger-4').click(function() {
        hideAllWps();
        $('.wp-target-4').show();
        $(this).addClass('active-img');
    });
}

// 注册到SharePoint的加载事件队列
_spBodyOnLoadFunctionNames.push("initWpToggle");

第三步：可选——给点击的图片加高亮效果 #

为了让用户知道自己点了哪张图片，你可以加个简单的CSS高亮样式，同样放在内容编辑器Web部件的HTML源里，和JS代码放在一起：

<style>
.active-img {
    border: 2px solid #0078D7; /* 用SharePoint默认主题色，你可以换成自己喜欢的颜色 */
    opacity: 0.9;
    cursor: pointer; /* 鼠标悬停显示手型，增强交互感 */
}
.img-trigger-1, .img-trigger-2, .img-trigger-3, .img-trigger-4 {
    cursor: pointer;
}
</style>

最后测试一下 #

保存页面后，默认所有Web部件都会隐藏，点击对应的图片，应该只会显示对应的Web部件，其他自动隐藏。如果没生效，先检查：

• CSS类名有没有写错（大小写要一致）
• 内容编辑器Web部件有没有正确保存代码
• 页面有没有刷新（有时候SharePoint会缓存，按Ctrl+F5强制刷新试试）

内容的提问来源于stack exchange，提问作者Tonya Reznor