Question

我在我的/ resources上使用名为GalleryPro的DotNetNuke模块。这允许我通过前端构建器向库中添加资源。资源库的当前HTML“过滤器”是：

<div class="pro-isotope_group"> 
     <a data-filter="*" href="javascript:;" class="active">All</a>
                <a href="javascript:;" data-filter=".AnalystReports" title="Analyst Reports">Analyst Reports</a>
            <a href="javascript:;" data-filter=".WhitePapers" title="White Papers">White Papers</a>
            <a href="javascript:;" data-filter=".Infographics" title="Infographics">Infographics</a>
            <a href="javascript:;" data-filter=".Ebooks" title="Ebooks">Ebooks</a>
            <a href="javascript:;" data-filter=".DataSheets" title="Data Sheets">Data Sheets</a>
            <a href="javascript:;" data-filter=".CaseStudies" title="Case Studies">Case Studies</a>
            <a href="javascript:;" data-filter=".Blogs" title="Blogs">Blogs</a>
            <a href="javascript:;" data-filter=".Videos" title="Videos">Videos</a>
       </div>

实际资源位于<div class="isotope-margin">＆amp;过滤在此页面上正常工作。我无法编辑html或javascript，因为它是预构建的模块。

在我的主页上，我有一个html块：

<ul class="list-ico ico-sm">
<li><i class="fa fa-chevron-right">&nbsp;</i><a class="menu-sub" href="/Resources">Full Resource Library</a></li>
<li><i class="fa fa-chevron-right">&nbsp;</i><a class="menu-sub" href="/Resources">Analyst Reports</a></li>
<li><i class="fa fa-chevron-right">&nbsp;</i><a class="menu-sub" href="/Our-Blog">Blog</a></li>
<li><i class="fa fa-chevron-right">&nbsp;</i><a class="menu-sub" href="/Resources">Case Studies</a></li>
<li><i class="fa fa-chevron-right">&nbsp;</i><a class="menu-sub" href="/Resources">Data Sheets</a></li>
<li><i class="fa fa-chevron-right">&nbsp;</i><a class="menu-sub" href="/Resources">Ebooks</a></li>
<li><i class="fa fa-chevron-right">&nbsp;</i><a class="menu-sub" href="/Resources">Video Gallery</a></li>
<li><i class="fa fa-chevron-right">&nbsp;</i><a class="menu-sub" href="/Resources">White Papers</a></li>
<li><i class="fa fa-chevron-right">&nbsp;</i><a class="menu-sub" href="/Resources">Academy</a></li>

我希望主页菜单链接到/ resources页面，但也自动加载相应的数据过滤器。这可能吗？

示例：我点击主菜单中的白皮书＆amp;使用白皮书过滤器重定向到/资源。

这让我烦恼！任何帮助表示赞赏。

谢谢，克里斯

Answer 1

你需要为此编写一些JavaScript。

您说您无法编辑此预构建组件的HTML或JavaScript，但也许您可以将JavaScript添加到包装/托管此组件的页面中？

如果您更改链接以附加如下所示的查询字符串：

<li><i class="fa fa-chevron-right">&nbsp;</i><a class="menu-sub" href="/Resources?filter=WhitePapers">White Papers</a></li>

然后在GalleryPro组件的主页上，您可以编写JavaScript以查找相应的内容并将class='active'附加到其中。

使用jQuery的示例：

$().ready(function() {
    //read the ?filter=WhitePapers from the request
    var selected_filter = $.url().param('filter');
    //manually drill into the component's links
    $('.pro-isotope_group').find('a').each(function(){
        //clear any existing 'active' css
        $(this).removeClass('active');
        //grab the data-filter attribute
        var cur_filter = $(this).data('filter').substring(1);
        //if the request matches
        if(cur_filter === selected_filter) {
            $(this).addClass('active');
        }
    });
});

这个例子做了一些可能会或可能不会有效的假设。如果你只想显示哪个链接是“活动的”，这应该没问题，但我不确定这是否会影响组件的任何功能。

希望这有助于或至少为您提供一些想法。

使用data-filter属性链接到第二页

1 个答案: