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

Question

我正在使用Joomla和这个模板。我想在我的主页上创建一个链接，单击该链接时，会将用户带到投资组合页面并显示一个预先选择的选项卡，其中包含过滤结果。

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

选项卡 html 如下所示;

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

我试图在页面加载时触发点击操作，基于使用此代码的 URLexample.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>

但是，唯一发生的事情是选项卡突出显示，就像它处于活动状态一样。但结果不会被过滤。

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

我不太担心动画。

该网站似乎正在使用随机播放.js

我怎样才能做到这一点？

Answer 1

编辑以下 Joomla 文件(如果可能，创建覆盖(;

组件\com_spsimpleportfolio\资产\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 哈希筛选项目。