jquery - 简单的 css 选项卡式菜单提交未显示

Question

我刚刚开始新的...我有这个带有 jquery 的 css 标签..

<ul class="tabs">
<li><a href="#tab1">First tab</a></li>
<li><a href="#tab2">Second tab</a></li>
</ul>

<div class="tab_container">
<div id="tab1" class="tab_content">
    Content of the first tab
</div>
<div id="tab2" class="tab_content">
Content
</div>

我的查询

    <script type="text/javascript">
     $(document).ready(function() {
    //Default Action
     $(".tab_content").hide(); //Hide all content
     $("ul.tabs li:first").addClass("active").show(); //Activate first tab
     $(".tab_content:first").show(); //Show first tab content
     //On Click Event
     $("ul.tabs li").click(function() {
     $("ul.tabs li").removeClass("active"); //Remove any "active" class
     $(this).addClass("active"); //Add "active" class to selected tab
     $(".tab_content").hide(); //Hide all tab content
     var activeTab = $(this).find("a").attr("href"); 
      $(activeTab).fadeIn(); //Fade in the active content
      return false;
      });
      });
      </script>

它在表单域上运行良好，但是当我在表单域后添加提交按钮时它消失了..但是当只使用提交按钮(没有其他表单域)时..它显示.. 我试图更改 css 设置，但无法弄清楚..我尽力在这里清楚..

和CSS

       ul.tabs {
       margin: 0;
       padding: 0;
       float: left;
       list-style: none;
       height: 32px; /*--Set height of tabs--*/
       border-bottom: 1px solid #999;
       border-left: 1px solid #999;
       width: 100%;
               }

       ul.tabs li {
       float: left;
       margin: 0;
       padding: 0;
       height: 31px; /*--Subtract 1px from the height of the unordered list--*/
       line-height: 31px; /*--Vertically aligns the text within the tab--*/
       border: 1px solid #999;
       border-left: none;
       margin-bottom: -1px; /*--Pull the list item down 1px--*/
       overflow: hidden; 
       position: relative;
       background: #e0e0e0;
        }

      ul.tabs li a {
      text-decoration: none;
      color: #000;
     display: block;
     font-size: 1.2em;
     padding: 0 20px;
     border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
     outline: none;
     }

     ul.tabs li a:hover {
     background: #ccc;
     }

     html ul.tabs li.active, html ul.tabs li.active a:hover  { /*--Makes sure that the active tab does not listen to the hover properties--*/
     background: #fff;
     border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
     }

     .tab_container {
     border: 1px solid #999;
     border-top: none;
     overflow: hidden;
     clear: both;
     float: left; width: 100%;
     background: #fff;
     }

     .tab_content {
     padding: 20px;
     font-size: 1.2em;
     color:#333;
     }

请帮忙!!我哪里做错了...

我的html表单代码

                 <label for="username" id="name_label">Username</label><br>
                 <input id="username" type="text" name="username"/><br>

                 <label for="password" id="name_label">Password</label><br>
                 <input id="password" type="text" name="password"/><br>

                 <label for="confirm_password" id="name_label">Confirm Password</label>              <br>
                 <input id="confirm_password" type="text" name="confirm_password"/><br>

                   <br>
                 <b>Personal Details</b><br><br>

                 <label for="firstname" id="name_label">Firstname</label><br>
                 <input id="firstname" type="text" name="firstname"/><br>

                <label for="lastname" id="name_label">Lastname</label><br>
                <input id="lastname" type="text" name="lastname"/><br>

                Gender<br>
                <select class="cc" name="sex" id="sex">
                <option value="" selected="selected">--Select Gender--</option>
                <option value="m">Male</option>
                <option value="f">Female</option>
                </select>

                <br>

                Date of birth<br>

                <label class="dob" for="dateid" id="date_label">Date
                <?php $number = range(1,31);
                $tempholder = range(1,31);
                $nr=31;
                echo '<select class="doba" name="dateid" id="dateid">';
                echo '<option value="" selected="selected">--Select Date--</option>';
                for ($i=0; $i<$nr; $i++)
                {

                 echo "<option>".$tempholder[$i]."</option>";
                 }
            echo '</select>';

                ?>
                </label>



                <label class="dob" for="month" id="month_label">Month
                <?php $number = range(1,12);
                $tempholder = range(1,12);
                $nr=12;             
                echo '<select class="doba" name="month" id="month">';
                echo '<option value="" selected="selected">--Select Month--</option>';
                for ($i=0; $i<$nr; $i++)
                {

                echo "<option>".$tempholder[$i]."</option>";
                }
            echo '</select>';

                ?>
                </label>

               <label class="dob" for="year" id="year_label">Year
                <?php 
              $tempholder =  range(1960,2000);
              $nr=40;
              echo '  <select  class="doba" name="year" id="year">';
              echo '<option value="" selected="selected">--Select Year--</option>';
              for ($i=0; $i<$nr; $i++)
              {
              echo "<option>".$tempholder[$i]."</option>";
              }
         echo '</select>';

             ?>
             </label>
             <br>

             <b>Contact Details</b> <br>
             <label for="add1" id="add1_label">Address1</label><br>
             <input id="add1" type="text" name="add1"/><br>

             <label for="add2" id="add2_label">Address2</label><br> 
             <input id="add2" type="text" name="add2"/><br>

             <label for="add3" id="add3_label">Address3</label><br>
             <input id="add3" type="text" name="add3"/><br>

             <label for="mobile" id="mobile_label">Mobile</label><br> 

             <input id="mobile" type="text" name="mobile"/><br>

             <label for="tele" id="tele_label">Telephone</label><br>


              <input id="tele" type="text" name="tele"/><br>

              <label for="email" id="email_label">E-mail</label><br>
              <input id="email" type="text" name="email"/><br>

                <br>


              <b>Card Details</b><br>
              <label for="cardno" id="cardno_label">Card No</label><br>
              <input id="cardno" type="text" name="cardno"/><br>

             <label for="cvcno" id="cvcno_label">CVC No</label><br>
             <input id="cvcno" type="text" name="cvcno"/><br>


             <label class="dob" for="dateid" id="date_label">Expiry Date<br>
             <?php $number = range(1,31);
             $tempholder = range(1,31);
             $nr=31;
             echo '<select class="doba" name="dateid" id="dateid">';
             echo '<option value="" selected="selected">--Select Date--</option>';
             for ($i=0; $i<$nr; $i++)
             {

           echo "<option>".$tempholder[$i]."</option>";
             }
         echo '</select>';

             ?>
            </label>



           <label class="dob" for="month" id="month_label">Month
           <?php $number = range(1,12);
           $tempholder = range(1,12);
           $nr=12;
           echo '<select class="doba" name="month" id="month">';
           echo '<option value="" selected="selected">--Select Month--</option>';
           for ($i=0; $i<$nr; $i++)
           {

           echo "<option>".$tempholder[$i]."</option>";
            }
       echo '</select>';

           ?>
           </label>

           <label class="dob" for="year" id="year_label">Year
           <?php 
           $tempholder =  range(2013,2050);
           $nr=40;
           echo '  <select  class="doba" name="year" id="year">';
           echo '<option value="" selected="selected">--Select Year--</option>';
           for ($i=0; $i<$nr; $i++)
           {
           echo "<option>".$tempholder[$i]."</option>";
           }
           break;
       echo '</select>';

           ?>
           </label>

           <br>
          <select  name="cardtype" id="cardtype">
          <option value="" selected="selected">--Card Type--</option>
           <option value="visa">Visa</option>
          <option value="master">Master</option>
          <option value="american">American Express</option>
          </select>

          <input type="submit" value="enter"/>

Answer 1

错误#1:

你把 SelectBoxes 放在了 Labels 里面。

关闭 Label 然后打开 SelectBox，而不是将 SelectBox 封装在它自己的 label 中(确切地说正如您对输入字段所做的那样)。

错误#2:

ID(可能还有 name)应该是唯一的(根据合适的 DTD)。

您将 dateid、month、year 加倍。拆分它们以使其独一无二，例如 dateid1 和 dateid2 等...

开始更正代码，然后重试，如果仍然无法正常工作，请最终更新您的答案。