我的Accordion Tabbed Pages出错了

时间:2013-09-11 09:09:29

标签: javascript jquery html css

我有一个内容,在内容中我想放置一些用户帐户的设置,以便他们可以更改他们的信息..

这是我的代码 CSS

   *{
    font-family:Verdana, Geneva, sans-serif}
body{
    background-color:#33CC33;
    font-size:0.7em;}
p{
    font-size:1em;
    margin:0 0 1em 0;
    text-align:justify}

dl{
    padding:10px;
    min-width:960px;}

dl dt{
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    border:1px solid #ccc;
    margin:0;
    width:400px;}

dl dt a{
    color:#000;
    font-weight:bold;
    text-decoration:none;
    padding:10px;
    display:block;
    }

dl dd{
    color:#ccc;
    margin:0;
    width:400px;
    overflow:hidden;
    -webkit-transition:height 1s ease;
    -moz-transition:height 1s ease;
    -o-transition:height 1s ease;}  

dl dd p{
    padding:10px;
    margin:0;}

dl dd:not(:target){
    height:0;}

dl dd:target{
    height:900px;}

dl a.ie:hover dd, dl a.ie:focus dd{
    height:auto;
    color:#ccc !important;}

HTML

<link rel="stylesheet" href="tab.css">
<dl>
<dt><a href="#section1">Account Settings</a></dt>
<dd id="section1">
      <table>
      <form action="" method="post" name="register_form">

      <td><input type="text" name="email" placeholder="E-mail" size="50" /></td>
      </tr>

      <tr>
      <td><input type="text" name="reemail" placeholder="Re-Enter Email" size="50" /></td>
      </tr>

      <tr>
      <td><input type="password" name="password" placeholder="New Password" size="50" /></td>
      </tr>

      <tr>
      <td>
      <input type="text" name="fullname" placeholder="Full Name" size="50" />
      </td>
      </tr>

      <tr>
      <td>
      <input type="text" name="birthday" placeholder="Day Birth YYYY-MM-DD" size="29" />
          <select id="gender" name="gender">
                <option value="Male">Male</option>
                <option value="Female">Female</option>
                <option value="Others">Others</option>                
          </select>
</dd>

<dt><a href="#section2">Privacy Settings</a></dt>
<dd id="section2">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</dd>

<dt><a href="#section3">What Settings</a></dt>
<dd id="section3">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</dd>
</dl>

这是我的小提琴 http://jsfiddle.net/obink/kNs8d/

我看到的问题是,当我第一次点击section1时,一切都会好起来的,但是当我改为第2节时,奇怪的事情即将来临......

and ow ya,我只为它拍了一个CSS和HTML,我试图让它像jQuery或javascript一样工作(“当你去section1时,section1会缓和,而另一部分会缓和。否则当你去第2部分时,另一部分将缓和,第2部分将在“)

中缓和

我正在求助:(请...

抱歉我的英语。

1 个答案:

答案 0 :(得分:0)

哦,一切都是我的错误

我忘了关闭表格和表格标签

  </form>
  </table>

并且某些和标签尚未关闭

洛尔 抱歉打扰你