データフィルタ属性を使用して2番目のページにリンクします

Question

私は/私の/リソースでGalleryProと呼ばれるDotNetNukeモジュールを使用しています。これにより、フロントエンドビルダーを介してライブラリにリソースを追加することができます。リソースライブラリの現在のHTML「フィルタ」されています。実際のリソースは、フィルタリングがこのページで正しく動作します<div class="isotope-margin"> &内にある

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

。私はそれがビルド済みのモジュールであるので、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> 

私は/リソースのページにリンクするホームページのメニューをしたいだけでなく、自動で対応するデータフィルタをロードします。これは可能ですか？

例：私のメインメニューのホワイトペーパー&をホワイトペーパーフィルタでリダイレクトします。

これは私を悩ませています！どんな助けもありがとうございます。

おかげで、 クリス

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コンポーネントのホスト・ページには、適切なを見つけ、それにclass='active'を追加するためにJavaScriptを書くことができます。 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'); 
     } 
    }); 
}); 

この例では、あるいはうまくいかない可能性があり、いくつかの仮定をします。必要なのは、どのリンクが「アクティブ」であるかを表示することだけですが、これは問題ありませんが、これがコンポーネントの機能に影響を与えるかどうかはわかりません。

希望すると、これは役に立ちます。または少なくともあなたにいくつかのアイデアがあります。