jquery - 翻转文本未显示在所有元素中

Question

我有以下代码，其中包含 5 个框，所有框都排成一行，并带有超链接和鼠标悬停文本。该代码似乎适用于第一个框，但不适用于其余部分，但不适用于其余元素。

<!--DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"-->
<title>Hide/Show</title>
<style type="text/css">
  a {
    text-decoration: none;
    outline: none;
  }
  div#page {
    margin: 40px auto;
    border: 1px solid #f9fefc;
    width: 9px;
  }
  .TogWrap {
    width: 220px;
    padding: 2px;
  }
  #togTrigger {
    border: 1px solid #bebebe;
    padding: 1px 5px;
    background: #e7f5fc;
    color: #ddddd;
  }
  .togContent {
    margin-top: 2px;
    border: 1px #;
    padding: 5px 5px 5px 5px;
    background: #ededed;
  }
</style>
<script type="text/javascript">
  <!-- HIDE FROM OLD BROWSERS
  /* <![CDATA[ */

  var oVTog = {
    toggle: function(el) {
      oVTog.container = el.parentNode;
      oVTog.para = oVTog.container.getElementsByTagName('p')[0];
      oVTog.para.style.display = "none";

      el.onmouseover = function() {
        oVTog.para.style.display = '';
        return false;
      };
      el.onmouseout = function() {
        oVTog.para.style.display = 'none';
        return false;
      };
      el.onclick = function() {
        oVTog.para.style.display = oVTog.para.style.display == 'none' ? '' : 'none';
        return false;
      };
    }
  };
  window.onload = function() {
    var l = document.getElementById('togTrigger');
    oVTog.toggle(l);
  };

  /* ]]> */
  //END HIDING -->
</script>
<table>
  <tbody>
    <tr>
      <th>
        <div class="TogWrap" id="theTog">
          <a id="togTrigger" href="/sites/pm/CS_Submissions/_layouts/15/start.aspx#/CS_Submissions_Inbox/Forms/Active%20CS%20Submission.aspx">Active</a>
          <p class="togContent" style="display: none;">This list contains claimed and unclaimed submissions</p>
        </div>
      </th>
      <th>
        <div class="TogWrap" id="theTog">
          <a id="togTrigger" href="/sites/pm/CS_Submissions/CS_Submissions_Inbox/Forms/Active%20CS%20Submission.aspx">All (Without Attachments</a> 
          <p class="togContent" style="display: none;">Contains all active submissions</p>
        </div>
      </th>
      <th>
        <div class="TogWrap" id="theTog">
          <a id="togTrigger" href="/sites/pm/CS_Submissions/_layouts/15/start.aspx#/CS_Submissions_Inbox/Forms/Attachment.aspx">Email Attachments</a> 
          <p class="togContent" style="display: none;">All attchments to submissions</p>
        </div>
      </th>
      <th>
        <div class="TogWrap" id="theTog">
          <a id="togTrigger" href="/sites/pm/CS_Submissions/_layouts/15/start.aspx#/CS_Submissions_Inbox/Forms/AllItems.aspx">Returned Submissions</a>
          <p class="togContent" style="display: none;">All Submissions that have been reviewed and returned for additional information</p>
        </div>
      </th>
      <th>
        <div class="TogWrap" id="theTog">
          <a id="togTrigger" href="/sites/pm/CS_Submissions/_layouts/15/start.aspx#/CS_Submissions_Inbox/Forms/Logged%20Into%20CS%20Tracker.aspx">Logged Into CS Tracker</a> 
          <p class="togContent" style="display: none;">All Submssions that have been entered into CS Tracker</p>
        </div>
      </th>

    </tr>
  </tbody>
</table>

Answer 1

您不能在页面上使用具有相同 ID 的元素并运行 JavaScript

使用 JQuery 并将悬停应用于类而不是 ID