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

Question

我正在使用 Joomla 和 this template。我想在我的主页上创建一个 link，当点击它时，将把用户带到投资组合页面并显示一个预选的选项卡，带有过滤结果。

例如，我的主页 link 将是 'Branding Portfolio'，单击时，应转到 http://demo2.joomshaper.com/2019/indigo/index.php/portfolio 并且应预选 '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

我怎样才能做到这一点？

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

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

Trigger Tab Click and Filter Results Using Data Attribute

html

javascript

url

jquery

shuffle