使用HTML，CSS，JS的选项卡式表单 [英] Tabbed Forms Using HTML, CSS, JS
问题描述
我一直在寻找一些我一直在寻找的想法，而我遇到了这个问题: http://jsfiddle.net/RcrCJ/
I've been playing around with some ideas I've been searching for, and I came across this: http://jsfiddle.net/RcrCJ/
原始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"> </td>
</tr>
</table>
<!--</div>
<div id="job_costs" class="hide">-->
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td align="center"> </td>
</tr>
<tr>
<td align="center">
<div>
<input value="Cancel" name="qq" type="button">
<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-->
原始javascript
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.
我不是专业人士，但是我通常会在试验/错误方面表现出色.这是我一起尝试制作3个标签的内容: http://jsfiddle.net/cwaddilove/0Lo7jnoj/
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/
修改过的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"> </td>
</tr>
</table>
<!--</div>
<div id="job_costs" class="hide">-->
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td align="center"> </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"> </td>
</tr>
</table>
<!--</div>
<div id="job_costs" class="hide">-->
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td align="center"> </td>
</tr>
<tr>
<td align="center">
<div>
<input value="Cancel" name="qq" type="button">
<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-->
修改的javascript
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.
感谢进阶！
推荐答案
您在jQuery选择器中遇到错误:
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
这篇关于使用HTML，CSS，JS的选项卡式表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
