如何从带有 JS 的链接中获取灯箱？

Question

对于我的项目，我必须单击一个显示“更多信息”的按钮，当单击此按钮时，应该会出现一个带有显示更多信息的表格的灯箱。

现在在我的 HTML 中有一个表格：

< tr>

< td>Rules < /td>

< td>< input type="text" name="ruls" id="rules" value="" />

    < div>
    < a href="#" onClick="javascript:displayBox()">More Information< /a>
    < /div>

< /td>

< /tr>

现在我不确定在 href=" " 中添加什么。

我是否将我拥有的函数 displayBox 放在链接中？

因此，< a href=" " onClick="javascript:displayBox()"> Rules < /a>... 但同样，我不确定在 href 中放什么。

Answer 1

最佳做法是不要在您的 html 中放置任何 javascript，以防用户禁用了 Javascript。

试试这个：

<tr>  
    <td>Rules </td>
    <td>< input type="text" name="ruls" id="rules" value="" />
      <div>
        <a href="#" id="displayBox">More Information</a>
      </div>   
   </td>
</tr>

Javascript：

<script type="text/javascript">

  var myEl = document.getElementById('displayBox');

  myEl.addEventListener('click', function() {
      displayBox();
  }, false);

</script>