Joomla模板下如何通过URL哈希触发Portfolio标签页并筛选结果？

嘿，我明白你的问题了——你已经能让目标标签高亮，但内容没被过滤，这是因为单纯触发点击事件可能没真正调用Shuffle.js的核心过滤逻辑。咱们直接用Shuffle的官方API来搞定，比模拟点击更可靠。

问题根源 #

你之前的代码只是触发了标签的click事件，虽然模板给标签加上了激活样式，但Shuffle.js的内容过滤逻辑可能并没有被正确触发（有些模板会把样式切换和过滤逻辑分开处理，或者事件绑定时机有问题）。所以咱们要直接调用Shuffle的过滤方法，同时同步标签状态。

解决方案代码 #

替换你原来的脚本为以下代码：

<script>
jQuery(document).ready(function($) {
    // 提取URL中的哈希值，去掉#符号
    var targetGroup = location.hash.replace('#', '');
    
    // 检查哈希值有效且对应标签存在
    if (targetGroup && $('.sp-simpleportfolio-filter li[data-group="' + targetGroup + '"]').length) {
        // 同步标签激活状态：先移除所有标签的active类，再给目标标签添加
        $('.sp-simpleportfolio-filter li').removeClass('active');
        $('.sp-simpleportfolio-filter li[data-group="' + targetGroup + '"]').addClass('active');
        
        // 获取Shuffle实例（Indigo模板通常会把实例存在容器的data属性里）
        var shuffleContainer = $('.sp-simpleportfolio-items');
        var shuffleInstance = shuffleContainer.data('shuffle');
        
        // 调用Shuffle的filter方法，传入目标分组值
        if (shuffleInstance) {
            shuffleInstance.filter(targetGroup);
        }
    }
});
</script>

关键细节说明 #

1. 直接调用Shuffle API：shuffleInstance.filter(targetGroup)是Shuffle.js官方提供的过滤方法，能确保内容被正确筛选，比模拟点击更稳定。
2. 同步标签样式：手动添加/移除active类，保证标签高亮和筛选结果完全匹配。
3. 兼容性检查：先判断哈希值和对应标签是否存在，避免页面加载时出现无意义的错误。

排查小技巧 #

如果发现shuffleInstance获取不到（比如控制台报错），可以在浏览器开发者工具的控制台里输入：

$('.sp-simpleportfolio-items').data('shuffle')

看看是否返回Shuffle实例。如果没有，说明模板可能用了其他方式存储实例，你可以查看模板的初始化代码（通常在js文件夹里的portfolio.js或类似文件），找到Shuffle实例的变量名，替换代码里的获取方式即可。

这样修改后，你首页的品牌作品集链接（比如http://demo2.joomshaper.com/2019/indigo/index.php/portfolio#branding）就能正确跳转并筛选内容，同时完全不影响后续标签的正常切换功能。

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