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>

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;
     }

请帮忙！！wat我做错了吗...

我的 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"/>

score 0 · Accepted Answer

我添加了 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>

score 0 · Accepted Answer

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

干得好。

score 0 · Accepted Answer

错误 #1：

你Labels把SelectBoxes里面的东西弄乱了。

关闭 aLabel然后打开 a SelectBox，而不是将 a 封装SelectBox在它自己的内部label（就像您对输入字段所做的那样）。

错误 #2：

IDs（可能还有names）应该是唯一的（根据体面的DTD）。

你加倍dateid, month, year. 拆分它们以使它们独一无二，例如dateid1anddateid2等...

开始更正代码，然后重试并最终更新您的答案，如果它仍然不起作用。

score 0 · Accepted Answer

为什么你需要在年份下拉列表中休息，尝试删除它。

你的完整代码

<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"/>

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

4 回答 4

Related

Reference