以下是代码:
使用Javascript:
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID+'-show').style.display != 'none') {
document.getElementById(shID+'-show').style.display = 'none';
document.getElementById(shID).style.display = 'block';
}
else {
document.getElementById(shID+'-show').style.display = 'inline';
document.getElementById(shID).style.display = 'none';
}
}
}
CSS:
.more {
display: none;
}
a.showLink, a.hideLink {
text-decoration: none;
color: #b266b2 ;
background: transparent url(down.gif) no-repeat left; }
a.hideLink {
background: transparent url(up.gif) no-repeat left; }
a.showLink:hover, a.hideLink:hover {
color: #b266b2 ;
}
HTML:
<table width="68%" align="center">
<tr>
<td bgcolor="#313131" background="graphics/backgrounds/tablebg1.png" width="50%"> <font size="4" color="#5be5e5">
<b>
- 7/17/2014
</font>
<br> <a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;">Click here to view the update log.</a>
<div id="example" class="more"> <font size="4" color="#b266b2">-</font> <font size="4"> Completely updated to the new layout everything is functional, unless something broke if that happens please tell me.</font>
<br> <font size="4" color="#b266b2">-</font> <font size="4"> Going to be working on rewording link names and anything else that needs it next.</font>
<br> <a href="#" id="example-hide" class="hideLink" onclick="showHide('example');return false;">Click here to get rid of the update log and possibly never see it again.</a>
</div>
<br> <font size="4" color="#5be5e5">
<b>
- 5/23/2014
</font>
<br> <a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;">Click here to view the update log.</a>
<div id="example" class="more"> <font size="4" color="#b266b2">-</font> <font size="4"> Fixed everything involving the Navigation Bar, News Bulletin, and Warning Signs. If there is still something wrong with it please contact me.</font>
<br> <font size="4" color="#b266b2">-</font> <font size="4"> Edited the layout of the website and shortened the category titles.</font>
<br> <a href="#" id="example-hide" class="hideLink" onclick="showHide('example');return false;">Click here to get rid of the update log and possibly never see it again.</a>
</div>
<br>
</td>
</tr>
</table>
问题是,当我点击2014年5月23日的更多链接时,它会显示2014年7月17日的信息。我试图得到它,所以当你点击查看更多2014年5月23日它显示在5/23/2014下的信息。相反,当点击更多信息时,它会打开2014年7月17日的信息,就好像我点击了该日期的更多信息一样。
我试图让jsfiddle链接,但代码因某些原因无法正常工作我可能设置错了。
如果我不够清楚,请告诉我,我会尝试更好地解释它。
编辑:问题是同样的问题,我在编码方面仍然相当新,并且不确定我需要做些什么才能使它们独一无二?例如,对于2014年5月23日,我可以在id之后放一个“1”,但是我需要在哪个id后放一个?