Tabbed Forms Using HTML, CSS, JS

旧城冷巷雨未停 提交于 2019-12-13 06:49:25

问题


I've been playing around with some ideas I've been searching for, and I came across this: http://jsfiddle.net/RcrCJ/

original html

        <div id="container">
          <div id="content">
          <ul id="info-nav">
                    <li><a href="#equipment_details"><span>Tab1</span></a></li>
                    <li><a href="#job_costs"><span>Tab2</span></a></li>
                    </ul>
            <div id="info">
            <form action="inex.html" method="post" id="form1" name="form1" class="formfields">
                <div id="equipment_details" class="hide">

                    <table border="0" cellspacing="1" cellpadding="2" id="tbl_equipment_details" width="100%">
                      <tr>
                        <td width="23%" class="txt-right">XXXX</td>
                        <td width="31%"><input type="text" name="" id="qw" /></td>
                      </tr>
                      <tr>
                        <td class="txt-right">XXX</td>
                        <td><input type="checkbox" id="" value="1" name="" checked=""></td>
                      </tr>
                      <tr>
                        <td class="txt-right">XXX XXX</td>
                        <td><input type="text" value="" name="" id="we" /></td>
                      </tr>
                    </table>
                    <!--tbl_equipment_details closed-->
            </div><!--div equipment_details closed-->

                <!--<div id="specifications" class="hide">-->
                <div id="job_costs" class="hide">
                    <table border="0" cellspacing="1" cellpadding="2" width="100%" id="tbl_specifications">
                      <tr>
                        <td width="18%" class="txt-right">Notes</td>
                        <td colspan="2" valign="top">
                            <textarea rows="3" id="description"  cols="60" name=""></textarea>                            </td>
                      </tr>
                      <tr>
                        <td class="txt-right">XXX</td>
                        <td width="39%">
                            <select name="purchased_from">
                                <option selected></option>
                                <option value="xxx">xxx1</option>
                                <option value="xxx">xxx2</option>
                                </select>                            </td>
                        <td class="txt-right">&nbsp;</td>
                      </tr>
                    </table>
              <!--</div>

                <div id="job_costs" class="hide">-->                        
                    <table border="0" cellspacing="0" cellpadding="0" width="100%">
                      <tr>
                        <td align="center">&nbsp;</td>
                      </tr>
                      <tr>
                        <td align="center">
                            <div>
                                <input value="Cancel" name="qq" type="button"> &nbsp;
                                <input value="Save Changes" name="ww" type="submit">
                            </div>                            </td>
                      </tr>
                    </table>
                </div><!--div feedback closed-->
              </form>
            </div><!--div info closed-->
        </div><!--div content closed-->
    </div><!--div container closed-->

original javascript

    $(document).ready(function(){
  $( '#info #job_costs' ).hide();

  $('#info-nav li').click(function(e) {
    $('#info .hide').hide();
    $('#info-nav .current').removeClass("current");
    $(this).addClass('current');

    var clicked = $(this).find('a:first').attr('href');
    $('#info ' + clicked).fadeIn('fast');
    e.preventDefault();
  }).eq(0).addClass('current');
});

It was almost exactly what I was looking to do, but I wanted more tabs. I started playing around with it, but for some reason that I can't seem to understand, when I add a third or fourth etc. tab and I run it, it will display all of the tabs until you click on one of them, then it appears normal. I figured it was something silly, but I must have played around with this for hours now and I'm still no further ahead than when I started.

I'm no pro, but I'm usually pretty good at trial / error. This is what I hacked together in an attempt to make 3 tabs: http://jsfiddle.net/cwaddilove/0Lo7jnoj/

modified html

<div id="container">
      <div id="content">
      <ul id="info-nav">
                <li><a href="#equipment_details"><span>Tab1</span></a></li>
                <li><a href="#job_costs"><span>Tab2</span></a></li>
                <li><a href="#job_assignment"><span>Tab3</span></a></li>
            </ul>
            <div id="info">
            <form action="inex.html" method="post" id="form1" name="form1" class="formfields">
                <div id="equipment_details" class="hide">

                    <table border="0" cellspacing="1" cellpadding="2" id="tbl_equipment_details" width="100%">
                      <tr>
                        <td width="23%" class="txt-right">XXXX</td>
                        <td width="31%"><input type="text" name="" id="qw" /></td>
                      </tr>
                      <tr>
                        <td class="txt-right">XXX</td>
                        <td><input type="checkbox" id="" value="1" name="" checked=""></td>
                      </tr>
                      <tr>
                        <td class="txt-right">XXX XXX</td>
                        <td><input type="text" value="" name="" id="we" /></td>
                      </tr>
                    </table>
                    <!--tbl_equipment_details closed-->
            </div><!--div equipment_details closed-->

                <!--<div id="specifications" class="hide">-->
                <div id="job_costs" class="hide">
                    <table border="0" cellspacing="1" cellpadding="2" width="100%" id="tbl_specifications">
                      <tr>
                        <td width="18%" class="txt-right">Notes</td>
                        <td colspan="2" valign="top">
                            <textarea rows="3" id="description"  cols="60" name=""></textarea>                            </td>
                      </tr>
                      <tr>
                        <td class="txt-right">XXX</td>
                        <td width="39%">
                            <select name="purchased_from">
                                <option selected></option>
                                <option value="xxx">xxx1</option>
                                <option value="xxx">xxx2</option>
                                </select>                            </td>
                        <td class="txt-right">&nbsp;</td>
                      </tr>
                    </table>
              <!--</div>

                <div id="job_costs" class="hide">-->                        
                    <table border="0" cellspacing="0" cellpadding="0" width="100%">
                      <tr>
                        <td align="center">&nbsp;</td>
                      </tr>
                    </table>
                </div><!--div feedback closed-->
                <div id="job_assignment" class="hide">
                    <table border="0" cellspacing="1" cellpadding="2" width="100%" id="tbl_assignment">
                      <tr>
                        <td width="18%" class="txt-right">Notes</td>
                        <td colspan="2" valign="top">
                            <textarea rows="3" id="assignment"  cols="60" name=""></textarea>                            </td>
                      </tr>
                      <tr>
                        <td class="txt-right">XXX</td>
                        <td width="39%">
                            <select name="sold_to">
                                <option selected></option>
                                <option value="xxx">xxx1</option>
                                <option value="xxx">xxx2</option>
                                </select>                            </td>
                        <td class="txt-right">&nbsp;</td>
                      </tr>
                    </table>
              <!--</div>

                <div id="job_costs" class="hide">-->                        
                    <table border="0" cellspacing="0" cellpadding="0" width="100%">
                      <tr>
                        <td align="center">&nbsp;</td>
                      </tr>
                      <tr>
                        <td align="center">
                            <div>
                                <input value="Cancel" name="qq" type="button"> &nbsp;
                                <input value="Save Changes" name="ww" type="submit">
                            </div>                            </td>
                      </tr>
                    </table>
                </div><!--div feedback closed-->
              </form>
            </div><!--div info closed-->
        </div><!--div content closed-->
    </div><!--div container closed-->

modified javascript

    $(document).ready(function(){
  $( '#info #job_costs #job_assignment' ).hide();

  $('#info-nav li').click(function(e) {
    $('#info .hide').hide();
    $('#info-nav .current').removeClass("current");
    $(this).addClass('current');

    var clicked = $(this).find('a:first').attr('href');
    $('#info ' + clicked).fadeIn('fast');
    e.preventDefault();
  }).eq(0).addClass('current');
});

I'm hoping someone will be able to see what I've done wrong and can help point me in the right direction.

Thanks in advanced!


回答1:


You have an error in jQuery selector:

$( '#info #job_costs #job_assignment' ).hide();

To hide several elements you need to put comma in between selectors like this:

$( '#info, #job_costs, #job_assignment' ).hide();

Solution in your case: you just need to hide two of the tabs so that one would be visible at the beginning. This is what you need to use in your code:

$( '#job_costs, #job_assignment' ).hide();

There is some room for improvement here but this will work. Here is updated fiddle



来源:https://stackoverflow.com/questions/25352468/tabbed-forms-using-html-css-js

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!