点击链接查看页面的另一部分使用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 ([email protected]) </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"; 
}