使用数据属性触发选项卡单击和过滤结果答案

【问题标题】：Trigger Tab Click and Filter Results Using Data Attribute使用数据属性触发选项卡单击和过滤结果
【发布时间】：2019-08-09 10:41:27
【问题描述】：

我正在使用 Joomla 和 this template。我想在我的主页上创建一个链接，点击该链接后，用户将转到投资组合页面并显示一个预先选择的选项卡，并显示过滤结果。

例如，我的主页链接是“Branding Portfolio”，点击后应该转到http://demo2.joomshaper.com/2019/indigo/index.php/portfolio，并且应该预先选择“Branding”选项卡，并且已经过滤的项目仅显示 Branding。

标签 html 看起来像这样；

<li data-group="branding"><a href="#">Branding</a></li>

我尝试在页面加载时触发点击操作，基于 URL example.com/portfolio#branding 使用此代码；

<script>
    var hash = location.hash.replace('#', '');
    jQuery(document).ready(function($) {
        jQuery('.sp-simpleportfolio-filter li[data-group="' + hash + '"] a').trigger('click');
});
</script>

但是，唯一发生的事情是标签被突出显示，就像它处于活动状态一样。但没有过滤结果。

进入预过滤页面后，我需要能够在选项卡之间切换并继续正常过滤。

我不太担心动画。

该网站似乎正在使用shuffle.js

我怎样才能做到这一点？

【问题讨论】：

标签： javascript jquery html url shuffle

【解决方案1】：

编辑以下 Joomla 文件（如果可能，创建一个覆盖）；

components\com_spsimpleportfolio\assets\js\spsimpleportfolio.js

添加三行代码；

jQuery(function($) {

    var $container = $('.sp-simpleportfolio-items');

    $(window).load(function() {
        var $sizer = $container.find('.shuffle__sizer');

        $container.shuffle({
            itemSelector: '.sp-simpleportfolio-item',
            sequentialFadeDelay: 150,
            sizer: $sizer
        });

        // ADD - get the url hash
        var hash = location.hash.replace('#', '');
        // ADD - shuffle based on the hash
        $container.shuffle( 'shuffle', hash );
        // ADD - highlight the tab
        $('.sp-simpleportfolio-filter li[data-group="' + hash + '"] a').trigger('click');

    });

});

在页面加载时，应选择选项卡并根据 url 哈希过滤项目。

【讨论】：