簡單的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> 

myjquery

<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：

你搞亂了Labels把SelectBoxes在他們裏面。

關閉a Label然後打開SelectBox，而不是將SelectBox封裝在其自己的label（與輸入字段完全相同）中。

錯誤＃2：

ID S（以及可能name S）應該是唯一的（根據一個體面DTD）。

您正在加倍dateid，month,year。拆分他們使他們獨特，如dateid1和dateid2等...

開始糾正代碼，然後重試，並最終更新您的答案，如果它仍然無法正常工作。

Answer 2

我加30個輸入並切換從一個標籤到另一個完美。

<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 
    <form id="form1" name="form1" method="post" action=""> 
    <label> 
     <input type="text" name="textfield" id="textfield" /> 
    </label> 
    <label> 
     <input type="text" name="textfield2" id="textfield2" /> 
    </label> 
    <label> 
     <input type="text" name="textfield3" id="textfield3" /> 
    </label> 
    <label> 
     <input type="text" name="textfield4" id="textfield4" /> 
    </label> 
    <label> 
     <input type="text" name="textfield5" id="textfield5" /> 
    </label> 
    <label> 
     <input type="text" name="textfield6" id="textfield6" /> 
    </label> 
    <label> 
     <input type="text" name="textfield7" id="textfield7" /> 
    </label> 
    <label> 
     <input type="text" name="textfield8" id="textfield8" /> 
    </label> 
    <label> 
     <input type="text" name="textfield9" id="textfield9" /> 
    </label> 
    <label> 
     <input type="text" name="textfield10" id="textfield10" /> 
    </label> 
    <label> 
     <input type="text" name="textfield11" id="textfield11" /> 
    </label> 
    <label> 
     <input type="text" name="textfield12" id="textfield12" /> 
    </label> 
    <label> 
     <input type="text" name="textfield13" id="textfield13" /> 
    </label> 
    <label> 
     <input type="text" name="textfield14" id="textfield14" /> 
    </label> 
    <label> 
     <input type="text" name="textfield15" id="textfield15" /> 
    </label> 
    <label> 
     <input type="text" name="textfield16" id="textfield16" /> 
    </label> 
    <label> 
     <input type="text" name="textfield17" id="textfield17" /> 
    </label> 
    <label> 
     <input type="text" name="textfield18" id="textfield18" /> 
    </label> 
    <label> 
     <input type="text" name="textfield19" id="textfield19" /> 
    </label> 
    <label> 
     <input type="text" name="textfield20" id="textfield20" /> 
    </label> 
    <label> 
     <input type="text" name="textfield21" id="textfield21" /> 
    </label> 
    <label> 
     <input type="text" name="textfield22" id="textfield22" /> 
    </label> 
    <label> 
     <input type="text" name="textfield23" id="textfield23" /> 
    </label> 
    <label> 
     <input type="text" name="textfield24" id="textfield24" /> 
    </label> 
    <label> 
     <input type="text" name="textfield25" id="textfield25" /> 
    </label> 
    <label> 
     <input type="text" name="textfield26" id="textfield26" /> 
    </label> 
    <label> 
     <input type="text" name="textfield27" id="textfield27" /> 
    </label> 
    <label> 
     <input type="text" name="textfield28" id="textfield28" /> 
    </label> 
    <label> 
     <input type="text" name="textfield29" id="textfield29" /> 
    </label> 
    <label> 
     <input type="text" name="textfield30" id="textfield30" /> 
    </label> 
    <label> 
     <input type="submit" name="button" id="button" value="Submit" /> 
    </label> 
    </form> 
</div> 

Answer 3

<ul class="myMenu"> 
    <li><a href="#">menu item 1</a></li> 
    <li><a href="#">menu item 2</a> 
     <ul> 
      <li><a href="#">sub menu item 1</a></li> 
      <li><a href="#">sub menu item 2</a></li> 
      <li><a href="#">sub menu item 3</a></li> 
      <li><a href="#">sub menu item 4</a></li> 
     </ul> 
    </li> 
    <li><a href="#">menu item 3</a> 
     <ul> 
      <li><a href="#">sub menu item 1</a></li> 
      <li><a href="#">sub menu item 2</a></li> 
      <li><a href="#">sub menu item 3</a></li> 
      <li><a href="#">sub menu item 4</a></li> 
     </ul> 
    </li> 
    <li><a href="#">menu item 4</a></li> 
    <li><a href="#">menu item 5</a></li> 
</ul> 

Now we're going to style the list with css: 

/*style the main menu*/ 
.myMenu { 
    margin:0; 
    padding:0; 
} 

.myMenu li { 
    list-style:none; 
    float:left; 
    font:12px Arial, Helvetica, sans-serif #111; 
} 

.myMenu li a:link, .myMenu li a:visited { 
    display:block; 
    text-decoration:none; 
    background-color:#09F; 
    padding: 0.5em 2em; 
    margin:0; 
    border-right: 1px solid #fff; 
    color:#111; 
} 

.myMenu li a:hover { 
    background-color:#0CF; 
} 

/*style the sub menu*/ 
.myMenu li ul { 
    position:absolute; 
    visibility:hidden; 
    border-top:1px solid #fff; 
    margin:0; 
    padding:0; 
} 

.myMenu li ul li { 
    display:inline; 
    float:none; 
} 

.myMenu li ul li a:link, .myMenu li ul li a:visited { 
    background-color:#09F; 
    width:auto; 
} 

.myMenu li ul li a:hover { 
    background-color:#0CF; 
} 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.myMenu > li').bind('mouseover', openSubMenu); 
     $('.myMenu > li').bind('mouseout', closeSubMenu); 

     function openSubMenu() { 
      $(this).find('ul').css('visibility', 'visible');  
     }; 

     function closeSubMenu() { 
      $(this).find('ul').css('visibility', 'hidden'); 
     }; 

    }); 
</script> 

在這裏你去。

Answer 4

爲什麼你需要break在下拉列表中，嘗試刪除它。

你的完整代碼

<script type="text/javascript" src="jquery.js"></script> 
<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> 
<style type="text/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; 
} 
</style> 
<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"> 
<form id="form1" name="form1" method="post" action=""> 
<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(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"/>