javascriptプログラムの特定の部分にリンクする必要がありますか？

Question

私は以下のプログラムを持っています。それは本質的に単なるファンシーリストです。しかし、私はサイトの他のページのリンクを介してプログラムの特定の部分にリンクする必要があります。

そして、ここでのプログラムにHTML & JavaScriptの相対的である：

<div id="container"> 
     <!--Horizontal Tab--> 
     <div id="parentHorizontalTab"> 
      <ul class="resp-tabs-list hor_1"> 
       <li>Where are peanuts made?</li> 
       <li>How are peanuts made?</li> 
       <li>Do I like peanuts?</li>    
      </ul> 
      <div class="resp-tabs-container hor_1"> 
       <div><p>This page consists of helpful peanuts</p></div> 
     <div><p> 
         <!--vertical Tabs--> 

         <div id="ChildVerticalTab_1"> 
          <ul class="resp-tabs-list ver_1"> 
          <li>In what country are peanuts made?</li> 
          <li>How do they transport peanuts?</li> 
         </ul> 
         <div class="resp-tabs-container ver_1"> 
          <div> 
           <p>Please refer to  <a>Page      1</a>the    peanut guide, a bunch of random stuff about peanuts here 
</p> 
          </div> 

$(document).ready(function() { 
    //Horizontal Tab 
    $('#parentHorizontalTab').easyResponsiveTabs({ 
     type: 'default', //Types: default, vertical, accordion 
     width: 'auto', //auto or any width like 600px 
     fit: true, // 100% fit in a container 
     tabidentify: 'hor_1', // The tab groups identifier 
     activate: function(event) { // Callback function if tab is switched 
      var $tab = $(this); 
      var $info = $('#nested-tabInfo'); 
      var $name = $('span', $info); 
      $name.text($tab.text()); 
      $info.show(); 
     } 
    }); 

    // Child Tab 
    $('#ChildVerticalTab_1').easyResponsiveTabs({ 
     type: 'vertical', 
     width: 'auto', 
     fit: true, 
     tabidentify: 'ver_1', // The tab groups identifier 
     activetab_bg: '#fff', // background color for active tabs in this group 
     inactive_bg: '#F5F5F5', // background color for inactive tabs in this group 
     active_border_color: '#c1c1c1', // border color for active tabs heads in this group 
     active_content_border_color: '#5AB1D0' // border color for active tabs contect in this group so that it matches the tab head border 
    }); 

      $('#ChildVerticalTab_2').easyResponsiveTabs({ 
     type: 'vertical', 
     width: 'auto', 
     fit: true, 
     tabidentify: 'ver_2', // The tab groups identifier 
     activetab_bg: '#fff', // background color for active tabs in this group 
     inactive_bg: '#F5F5F5', // background color for inactive tabs in this group 
     active_border_color: '#c1c1c1', // border color for active tabs heads in this group 
     active_content_border_color: '#5AB1D0' // border color for active tabs contect in this group so that it matches the tab head border 
    }); 

だから、基本的に、我々は垂直選択に表形式のレイアウトを持っているだけでなく、ここでのプログラムは次のようになります右のウィンドウに何かを示す横のもの。ユーザは、自分が望む水平メインカテゴリを選択し、その下にある特定の質問を選択して、右側のボックスに回答を表示する。

明らかに、IDセレクタを使用してページの特定の部分にリンクすることができます。問題は、特定の質問を含む特定のタブとそれぞれのサイドタブを自動的に開く必要があることです。

たとえば、「どの国でピーナッツを作っていますか」というページに質問があります。ページが読み込まれたときに読み込まれたページに「ピーナッツの作り方」タブを開き、どの国でピーナッツが作られたのか "垂直タブ。

私は自分のJavaScriptにイベント属性が必要だと思っていますが、このシナリオではどのイベント属性を使用するのか分かりません。

明らかに私はスクリプトの特定の部分を残しました。私がここに投稿できないコンテンツは、その背後にある理由でした。また、実際にピーナッツについてサイト上で動作していない:)

Answer 1

アイデアは、このように、URLのハッシュ部分に所望の水平および垂直方向のタブを置くことです：http://example.com/some/page#1/2この例では1が水平の指数でありますタブ、2は垂直タブのインデックスです。一般的なハッシュパターンは{zero-based-index}/{zero-based-index}です。ドキュメントがロードされると、urlのハッシュ値を解析し、ハッシュによって選択されたタブがあればそれをシミュレートします。 https://jsfiddle.net/xt66ee5k/

：

<script> 
$(document).ready(function() { 
    var selectedTabs = getTabsFromHash(window.location.hash); 
    if(!selectedTabs) { 
     return; 
    } 

    $('#parentHorizontalTab > ul > li:eq(' + selectedTabs.horizontalTab + ')').click(); 
    $('#ChildVerticalTab_1 > ul > li:eq(' + selectedTabs.verticalTab + ')').click(); 
}); 

function getTabsFromHash(hash) 
{ 
    var matchedParts = /(\d+)\/(\d+)/i.exec(hash); 
    if(matchedParts !== null){ 
     return { 
     horizontalTab: matchedParts[1], 
     verticalTab: matchedParts[2], 
     }; 
    } 

    return null; 
} 
</script> 

はデモを参照してください。