我有以下代码，其中包含一个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>
答案 0 :(得分：1)
您不能在页面上使用相同ID的元素并运行JavaScript
使用JQuery并将hover应用于类而不是ID
答案 1 :(得分：0)
您有多个具有相同ID的元素（togTrigger）。
尝试使用togTrigger1到togTrigger5并重复或循环所有相关的激活码。
答案 2 :(得分：0)
您需要了解使用ID和class
有两个重要的区别，即class可以在单个HTML页面中多次使用，而ID只能使用一次，否则会导致不必要的行为。
请参阅下面的编辑代码以获取更多帮助和指导。
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.getElementsByClassName('togTrigger');
oVTog.toggle(l[0]);
}; 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;
} <table>
<tbody>
<tr>
<th>
<div class="TogWrap" id="theTog">
<a class="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 class="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 class="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 class="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 class="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>