javascript - 触发选项卡单击并使用数据属性过滤结果

Question

我正在使用 Joomla 和 this template .我想在我的主页上创建一个链接，点击该链接会将用户带到投资组合页面并显示一个预选的选项卡，其中包含经过过滤的结果。

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

标签 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

我怎样才能做到这一点？

Answer 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 哈希过滤项目。