js 隐藏问题求助

现有以下hmtl代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js显示隐藏层</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function showdiv(targetid,objN){
      var target=document.getElementById(targetid);
      var clicktext=document.getElementById(objN)
      if (target.style.display=="block"){
      target.style.display="none";
      clicktext.innerText="点击查看详细信息";
      } else {
      target.style.display="block";
      clicktext.innerText='关闭详细信息信息';
}
}
-->
</script>
<style type="text/css">
<!--
body { font: normal 14px "宋体" }
a { text-decoration: none; }
#showtext { cursor: hand; cursor:pointer;}
#contentid { margin-top: 10px; width: 470px; border: 1px solid #CCC; background: #F1F1F1; padding: 15px; }
.none { display: none; }
-->
</style>
</head>
<body>
<a id="showtext" onClick="showdiv('contentid','showtext')">点击查看详细信息</a>
<div id="contentid" class="none">1、帅有个屁用!到头来还不是被卒吃掉!<br />
2.不怕被人利用，就怕你没用。<br />
3.人生自古谁无死，哪个拉*不用纸。<br />
4.生的伟大，死在花下！<br />
5.有钱人终成眷属。<br />
6.废话是人际关系的第一句。 <br />
7.只要锄头舞的好，那有墙角挖不倒？<br />
8.要在江湖混，最好是光棍！！ <br />
9.大部分人一辈子只做三件事：自欺、欺人、被人欺。<br />
10.不要和我比懒，我懒得和你比<br />
11.别人的钱财乃我的身外之物。<br />
12.女为悦己者容男为悦己者穷！ <br />
13.是镜子，总会反光的… 是金子，总会花光的；<br />
14.天赐你一双翅膀，就应该被红烧… <br />
15.唯女人与英语难过也(看到这句话我真难过，不过我家门前有条小溪更难过的)，唯老婆与工作难找也.<br />
</div>
</body>
</html>
在默认情况下，所有内容都被隐藏了，点击则会显示全部内容。能不能修改一下，在默认情况下显示前面的50个字符，其余字符则点击后显示。帮忙一下。谢谢了。

解决方案 »

  1.   

    另建个div行不？<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>js显示隐藏层</title>
    <script language="JavaScript" type="text/JavaScript">
    function showdiv(targetid,objN){
    var target=document.getElementById(targetid);
    var clicktext=document.getElementById(objN);
    var intro = document.getElementById("introid")
    if (target.style.display=="block"){
    target.style.display="none";
    intro.style.display="block";
    clicktext.innerText="点击查看详细信息";
    } else {
    target.style.display="block";
    intro.style.display="none";
    clicktext.innerText='关闭详细信息信息';
    }
    }
    </script>
    <style type="text/css">
    body { font: normal 14px "宋体" }
    a { text-decoration: none; }
    #showtext { cursor: hand; cursor:pointer;}
    #contentid { margin-top: 10px; width: 470px; border: 1px solid #CCC; background: #F1F1F1; padding: 15px; }
    #introid { margin-top: 10px; width: 470px; border: 1px solid #CCC; background: #F1F1F1; padding: 15px; }
    .none { display: none; }
    </style>
    </head>
    <body>
    <a id="showtext" onClick="showdiv('contentid','showtext')">点击查看详细信息</a>
    <div id="contentid" class="none">1、帅有个屁用!到头来还不是被卒吃掉!<br />
    2.不怕被人利用，就怕你没用。<br />
    3.人生自古谁无死，哪个拉*不用纸。<br />
    4.生的伟大，死在花下！<br />
    5.有钱人终成眷属。<br />
    6.废话是人际关系的第一句。 <br />
    7.只要锄头舞的好，那有墙角挖不倒？<br />
    8.要在江湖混，最好是光棍！！ <br />
    9.大部分人一辈子只做三件事：自欺、欺人、被人欺。<br />
    10.不要和我比懒，我懒得和你比<br />
    11.别人的钱财乃我的身外之物。<br />
    12.女为悦己者容男为悦己者穷！ <br />
    13.是镜子，总会反光的… 是金子，总会花光的；<br />
    14.天赐你一双翅膀，就应该被红烧… <br />
    15.唯女人与英语难过也(看到这句话我真难过，不过我家门前有条小溪更难过的)，唯老婆与工作难找也.<br />
    </div>
    <div id="introid">1、帅有个屁用!到头来还不是被卒吃掉!<br />
    2.不怕被人利用，就怕你没用。<br />
    3.人生自古谁无死，哪个拉*不用纸。<br />
    4.生的伟大，死在花下！<br />
    5.有钱人终成眷属。<br />
    6.废话是人际关系的第一句。 <br />
    ......
    </div>
    </body>
    </html>
      

  2.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>js显示隐藏层</title>
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function showdiv(targetid,objN){
          var target=document.getElementById(targetid);
          var target1=document.getElementById("contentid1");
          var clicktext=document.getElementById(objN)
          if (target.innerHTML==target1.innerHTML){
          target1.innerHTML=target.innerHTML.substring(0,50);
          clicktext.innerText="点击查看详细信息";
          } else {
          target1.innerHTML=target.innerHTML;
          clicktext.innerText='关闭详细信息信息';
    }
    }
    -->
    </script>
    <style type="text/css">
    <!--
    body { font: normal 14px "宋体" }
    a { text-decoration: none; }
    #showtext { cursor: hand; cursor:pointer;}
    #contentid { margin-top: 10px; width: 470px; border: 1px solid #CCC; background: #F1F1F1; padding: 15px; }
    #contentid1 { margin-top: 10px; width: 470px; border: 1px solid #CCC; background: #F1F1F1; padding: 15px; }
    .none { display: none; }
    -->
    </style>
    </head>
    <body>
    <a id="showtext" onClick="showdiv('contentid','showtext')">点击查看详细信息</a>
    <div id="contentid1"></div>
    <div id="contentid" class="none">1、帅有个屁用!到头来还不是被卒吃掉!<br />
    2.不怕被人利用，就怕你没用。<br />
    3.人生自古谁无死，哪个拉*不用纸。<br />
    4.生的伟大，死在花下！<br />
    5.有钱人终成眷属。<br />
    6.废话是人际关系的第一句。 <br />
    7.只要锄头舞的好，那有墙角挖不倒？<br />
    8.要在江湖混，最好是光棍！！ <br />
    9.大部分人一辈子只做三件事：自欺、欺人、被人欺。<br />
    10.不要和我比懒，我懒得和你比<br />
    11.别人的钱财乃我的身外之物。<br />
    12.女为悦己者容男为悦己者穷！ <br />
    13.是镜子，总会反光的… 是金子，总会花光的；<br />
    14.天赐你一双翅膀，就应该被红烧… <br />
    15.唯女人与英语难过也(看到这句话我真难过，不过我家门前有条小溪更难过的)，唯老婆与工作难找也.<br />
    </div>
    </body>
    </html>
      

  3.   

    或者这样<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>js显示隐藏层</title>
    <style type="text/css">
    body { font: normal 14px "宋体" }
    a { text-decoration: none; }
    #showtext { cursor: hand; cursor:pointer;}
    #contentid { margin-top: 10px; width: 470px; border: 1px solid #CCC; background: #F1F1F1; padding: 15px; }
    .none { display: none; }
    </style>
    </head>
    <body>
    <a id="showtext" onClick="showdiv('contentid','showtext')">点击查看详细信息</a>
    <div id="contentid" class="none">1、帅有个屁用!到头来还不是被卒吃掉!<br />
    2.不怕被人利用，就怕你没用。<br />
    3.人生自古谁无死，哪个拉*不用纸。<br />
    4.生的伟大，死在花下！<br />
    5.有钱人终成眷属。<br />
    6.废话是人际关系的第一句。 <br />
    7.只要锄头舞的好，那有墙角挖不倒？<br />
    8.要在江湖混，最好是光棍！！ <br />
    9.大部分人一辈子只做三件事：自欺、欺人、被人欺。<br />
    10.不要和我比懒，我懒得和你比<br />
    11.别人的钱财乃我的身外之物。<br />
    12.女为悦己者容男为悦己者穷！ <br />
    13.是镜子，总会反光的… 是金子，总会花光的；<br />
    14.天赐你一双翅膀，就应该被红烧… <br />
    15.唯女人与英语难过也(看到这句话我真难过，不过我家门前有条小溪更难过的)，唯老婆与工作难找也.<br />
    </div>
    <script language="JavaScript" type="text/JavaScript">
    var target=document.getElementById('contentid');
    var content = target.innerHTML;
    target.innerHTML = content.substring(0,100) +"......";
    target.style.display = "block";function showdiv(targetid,objN){
    var clicktext=document.getElementById(objN);
    if (clicktext.innerText=="关闭详细信息信息"){
    //target.style.display="none";
    clicktext.innerText="点击查看详细信息";
    target.innerHTML = content.substring(0,100);
    } else {
    //target.style.display="block";
    clicktext.innerText='关闭详细信息信息';
    target.innerHTML = content;
    }
    }
    </script>
      

  4.   

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>js显示隐藏层</title>
    <style type="text/css">
    body { font: normal 14px "宋体" }
    a { text-decoration: none; }
    #showtext { cursor: hand; cursor:pointer;}
    #contentid { margin-top: 10px; width: 470px; border: 1px solid #CCC; background: #F1F1F1; padding: 15px; }
    .none { display: none; }
    </style>
    </head>
    <body>
    <a id="showtext" onClick="showdiv('contentid','showtext')">点击查看详细信息</a>
    <div id="contentid" class="none">1、帅有个屁用!到头来还不是被卒吃掉!<br />
    2.不怕被人利用，就怕你没用。<br />
    3.人生自古谁无死，哪个拉*不用纸。<br />
    4.生的伟大，死在花下！<br />
    5.有钱人终成眷属。<br />
    6.废话是人际关系的第一句。 <br />
    7.只要锄头舞的好，那有墙角挖不倒？<br />
    8.要在江湖混，最好是光棍！！ <br />
    9.大部分人一辈子只做三件事：自欺、欺人、被人欺。<br />
    10.不要和我比懒，我懒得和你比<br />
    11.别人的钱财乃我的身外之物。<br />
    12.女为悦己者容男为悦己者穷！ <br />
    13.是镜子，总会反光的… 是金子，总会花光的；<br />
    14.天赐你一双翅膀，就应该被红烧… <br />
    15.唯女人与英语难过也(看到这句话我真难过，不过我家门前有条小溪更难过的)，唯老婆与工作难找也.<br />
    </div>
    <script language="JavaScript" type="text/JavaScript">
    var target=document.getElementById('contentid');
    var content = target.innerHTML;
    target.innerHTML = content.substring(0,100) +"......";
    target.style.display = "block";function showdiv(targetid,objN){
        var clicktext=document.getElementById(objN);
        if (clicktext.innerText=="关闭详细信息信息"){
            //target.style.display="none";
            clicktext.innerText="点击查看详细信息";
            target.innerHTML = content.substring(0,100);
        } else {
            //target.style.display="block";
            clicktext.innerText='关闭详细信息信息';
            target.innerHTML = content;
        }
    }
    </script>
      

  5.   

    谢谢上面了。方面都有效。zyzy15先回复，那分就多一点吧。再次感谢zyzy15和shan1119