显示和隐藏问题

时间:2014-08-27 02:18:14

标签: javascript html css

以下是代码:

使用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">&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;<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">&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;<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后放一个?

0 个答案:

没有答案