jQuery在一个页面中多个标签组 [英] JQuery multiple tag groups in one page
本文介绍了jQuery在一个页面中多个标签组的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我从哪里获得脚本的相关问题:
Related question where I got the scripts:
jQuery，一页上有多个选项卡组 jquery与相同脚本冲突
因此，正如标题所述，我有一个包含多个选项卡组的页面.这些选项卡仅适用于第一组，而停止适用于其余组.
So as the title says I have a page that contains multiple tab groups. the tabs only work on the first group and stops working on the rest.
脚本:
$(function() {
$(".tab_content").hide();
$("ul.tabs").each(function() {
$(this).find('li:first').addClass("active");
$(this).next('.panes').find('.tab_content:first').show();
});
$("ul.tabs").each(function() {
$("ul.tabs li a").click(function() {
alert("hello");
var cTab = $(this).closest('li');
cTab.siblings('li').removeClass("active");
cTab.addClass("active");
cTab.closest('ul.tabs').nextAll('.panes:first').find('.tab_content').hide();
var activeTab = $(this).attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
});
完整的HTML:
<table id="cform" style="margin-left: 13px;">
<tbody><tr>
<td>
<form id="form1" name="form1" method="post" action="">
<div>
<div>
<div>
<b>Subject:</b>
<select name="email_id[]" id="email_id_0" style="width: 350px">
<optgroup label="Emails">
<option value="">-- Select --</option><option value="1">test(Email)</option><option value="2">test(Email)</option><option value="3" selected="">tesst(Email)</option>
</optgroup>
<optgroup label="SMS">
</optgroup>
</select> <br>
<b>Subject:</b>
<select name="email_id[]" id="email_id_1" style="width: 350px;margin-right: 5;">
<optgroup label="Emails">
<option value="">-- Select --</option>
<option value="1">test</option><option value="2">test</option><option value="3">tesst</option> </optgroup>
<optgroup label="SMS">
</optgroup>
</select>
<center> <input type="button" class="btn-link right" value="Add More" onclick="javascript:addRows();"></center>
</div>
</div>
</div>
<br>
<div style=" margin-top: 25px; ">
<b>Scheduled (Days)</b>
<br>
<ul class="tabs">
<li class=""><a href="#tab1">Days</a></li>
<li class="active"><a href="#tab2">Weekly</a></li>
<li class=""><a href="#tab3">Monthly</a></li>
<li class=""><a href="#tab4">Yearly</a></li>
</ul>
<div class="panes">
<div id="tab1" class="tab_content" style="padding-top: 20px; display: none;">
days
</div>
<div id="tab2" class="tab_content" style="padding-top: 20px; display: block;">
weekly
</div>
<div id="tab3" class="tab_content" style="padding-top: 20px; display: none;">
monthly
</div>
<div id="tab4" class="tab_content" style="padding-top: 20px; display: none;">
yearly
</div>
</div>
<br>
<input type="hidden" name="rows_ctr" id="rows_ctr" value="1">
<input type="hidden" name="gid" id="" value="1">
<input type="submit" value="Save" class="btn-link right">
</div>
</form>
</td>
</tr><tr><td><form>
<div>
<div>
<div>
<b>Subject:</b>
<select name="email_id[]" id="email_id_1" style="width: 350px;margin-right: 5;">
<optgroup label="Emails">
<option value="">-- Select --</option>
<option value="1">test</option><option value="2">test</option><option value="3">tesst</option> </optgroup>
<optgroup label="SMS">
</optgroup>
</select>
<center> <input type="button" class="btn-link right" value="Add More" onclick="javascript:addRows();"></center>
</div>
</div>
</div>
<br>
<div style=" margin-top: 25px; ">
<b>Scheduled (Days)</b>
<br>
<ul class="tabs">
<li class="active"><a href="#tab5">Days</a></li>
<li><a href="#tab6">Weekly</a></li>
<li><a href="#tab7">Monthly</a></li>
<li><a href="#tab8">Yearly</a></li>
</ul>
<div class="panes">
<div id="tab5" class="tab_content" style="padding-top: 20px; display: block;">
days
</div>
<div id="tab6" class="tab_content" style="padding-top: 20px; display: none;">
weekly
</div>
<div id="tab7" class="tab_content" style="padding-top: 20px; display: none;">
monthly
</div>
<div id="tab8" class="tab_content" style="padding-top: 20px; display: none;">
yearly
</div>
</div>
<br>
<input type="hidden" name="rows_ctr" id="rows_ctr" value="1">
<input type="hidden" name="gid" id="" value="1">
<input type="submit" value="Save" class="btn-link right">
</div>
</form></td></tr>
</tbody></table>
请注意，这是动态的，因此我可以添加更多组，动态部分是保存表单的tr.
Note that this is dynamic hence i can add more groups, the dynamic part is the tr that holds the form.
谢谢
推荐答案
您的jQuery对我来说有点混乱.试试这个:
your jQuery is a bit confuse for me. try this:
$(function() {
/* init: display only first tab */
$(".tab_content").hide();
$("ul.tabs li").removeClass("active");
$("ul.tabs li:first").addClass("active");
$("ul.tabs").next(".panes").find(".tab_content:first").show();
/* binding click to display another tab */
$("ul.tabs li a").click(function(event) {
event.preventDefault();
$(this).parents("ul:first").next(".panes").find(".tab_content").hide();
$(this).parents("ul:first").find("li").removeClass("active");
$(this).parent().addClass("active");
var activeTab = $(this).attr("href");
$(activeTab).fadeIn();
});
});
..请参见 jsfiddle
这篇关于jQuery在一个页面中多个标签组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
