點擊鏈接查看頁面的另一部分使用Javascript

Question

我有一個問題，如何查看我想要的數據，當點擊其中一個鏈接。我如何獲得動態ID來觸發數據。

以下是我的圖片，當我點擊元數據部分的Shay, Linn. 2015 .....時，它將在Detail部分動態顯示細節。

這裏是我的代碼：

<td><a href="">Shay, Lynn. 2015. Tropical Cyclone Issac Ocean Profiles from 16 August 2012. Deepsea to Coast Connectivity in the Eastern Gulf of Mexico (DEEP-C). </a></td> 

，下面將我的詳細信息部分

<div class="panel-body"> 
      <p align="justify"><strong>Dataset Title:</strong> Tropical Cyclone Issac Ocean Profiles from 16 August 2012</p> 
      <p align="justify"><strong>File Identifier:</strong> R1.x138.077:0015</p> 
      <p align="justify"><strong>Dataset Originator:</strong> Shay, Lynn</p> 
      <p align="justify"><strong>Point of Contact:</strong> Shay, Lynn (nshay@rsmas.miami.edu) </p> 
      <p align="justify"><strong>Abstract:</strong> <br />A flight on NOAA's WP-3D Orion aircraft was conducted during tropical cyclone Isaac on 16 August 2012 over the northeastern Gulf of Mexico (from approximately 24 to 29 N and 84 to 90 W), over the Loop Current (LC) and associated frontal eddies. Airborne expendable probes measured atmospheric and oceanic parameters.</p> 
      <br /> 
      <a class="btn btn-success btn-xs" href="metaservice#">Metaservice</a> 
     </div> 

的代碼，我該怎麼辦呢？之前感謝

Answer 1

要解決此問題，只需使用javascript和html，您需要將所有信息打印出來，並在需要時顯示/隱藏相關詳細信息。

我的html有一個.panel-body格爲每個細節。注意他們每個人都有獨特的ID。這些在CSS中默認隱藏。我還給出了元數據中的每個鏈接（您可能希望更好地設計樣式），並且給出了metalink的類，因此我可以在javascript 。我已經削減了一些細節面板，以便於閱讀。

我的JavaScript獲取所有metalink s，並通過在for循環中遍歷它們來將每個單擊處理程序綁定到每個處理程序。然後進入showDetail（id）方法，該方法隱藏所有的細節面板，然後使用我們通過click事件傳遞的id顯示。通過檢查每個迭代中的每個div來確定是否顯示它，可能會有更優雅的方式來做到這一點，但這也可以工作。

我已經包含了一個JSFiddle來看到這個在行動，一些快速的&骯髒的造型。

HTML：

<div id="metadata"> 
    <h1>Metadata</h1> 
    <table> 
     <tr> 
     <th>Metadata</th> 
     <th>Download</th> 
     </tr> 
     <tr> 
     <td><a href="#" class="metalink" data-id="1">11111111111111111</a></td> 
     <td>Download</td> 
     </tr> 
     <tr> 
     <td><a href="#" class="metalink" data-id="2">22222222222222222</a></td> 
     <td>Download</td> 
     </tr> 
    </table> 
    </div> 

    <div id="detail"> 
    <h1>Detail</h1> 

    <div id="panel-1" class="panel-body"> 
     <p align="justify">Details for 111111111</p> 
    </div> 

    <div id="panel-2" class="panel-body"> 
     <p align="justify">Details for 22222222</p> 
    </div> 
    </div> 

JS：

var metalinks = document.getElementsByClassName("metalink"); 
    for (var i=0; i < metalinks.length; i++) { 
    metalinks[i].onclick = function(e){ 
     e.preventDefault(); 
     showDetail(this.dataset.id); 
    }; 
} 

function showDetail(id) 
{ 
    var detailsPanels = document.getElementsByClassName("panel-body"); 
    for (var j=0; j < detailsPanels.length; j++) { 
    detailsPanels[j].style.display = "none"; 
    } 
    var detailPanel = document.getElementById("panel-" + id); 
    detailPanel.style.display = "block"; 
}