我一直在研究我一直在寻找的一些想法，我遇到了这个: 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
$(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');
});
这几乎正是我想要做的，但我想要更多标签。我开始玩弄它，但出于某种我似乎无法理解的原因，当我添加第三个或第四个选项卡并运行它时，它将显示所有选项卡，直到您单击其中一个选项卡，然后它看起来很正常。我认为这很愚蠢，但我现在肯定已经玩了几个小时了，但我仍然没有比开始时更进一步。
我不是专业人士，但我通常很擅长试错。这就是我为了制作 3 个标签而一起破解的内容: 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
$(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');
});
我希望有人能够看到我做错了什么，并能帮助我指明正确的方向。
提前致谢!
最佳答案
你在 jQuery 选择器中有一个错误:
$( '#info #job_costs #job_assignment' ).hide();
要隐藏多个元素，您需要在选择器之间添加逗号，如下所示:
$( '#info, #job_costs, #job_assignment' ).hide();
针对您的情况的解决方案:您只需要隐藏两个选项卡，以便在开头显示一个选项卡。这是您需要在代码中使用的内容:
$( '#job_costs, #job_assignment' ).hide();
这里有一些改进的余地，但这会奏效。这是 updated fiddle
关于javascript - 使用 HTML、CSS、JS 的选项卡式表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25352468/