それほど高度なアプローチではありませんが、複数の機能を1つにまとめる最良の方法を探しています。これが私のコードです。基本的に、6つの異なるAjax呼び出しを要求する6つのステップが1ページにあります。問題は、奇妙なことに、ページの下部から始めて上に向かっていくと機能しますが、ページの上部から下に向かって開始すると、イベントが機能しないことです。助言がありますか?ありがとう!
html:
<!-- Expanding Block 1 -->
<div class="row span10 center clearfix"> <a href="http://diyshedsupply.com/step-1-tab/" class="show_hide btn btn-primary pull-right">+ -</a><div class="pull-right"> <strong> Specs and Details </strong></div><br />
</div>
<div class="row span10 center slidingDiv">
<div class="row span9 center clearfix">
<div id="ajax-content">Default Content</div>
</div>
</div>
<!-- Expanding Block -->
<!-- Expanding Block 2 -->
<div class="row span10 center clearfix"> <a href="http://diyshedsupply.com/step-2-tab/" class="show_hide2 btn btn-primary pull-right">+ -</a><div class="pull-right"> <strong> Specs and Details </strong></div><br />
</div>
<div class="row span10 center slidingDiv2">
<div class="row span9 center clearfix">
<div id="ajax-content2">Default Content</div>
</div>
</div>
<!-- Expanding Block -->
ect...
JavaScript:
// Load Ajax Content Step 1 //
$('.slidingDiv').hide();
$('.show_hide').show();
$('.show_hide').click(function () {
$('.slidingDiv').slideToggle(1600, function () {
$('.show_hide').addClass('close-tabs');
/* do anything after animation is complete */
$('ul.tabs').each(function (e) {
var $active, $content, $links = $(this).find('a');
// If the location.hash matches one of the links, use that as the active tab.
// If no match is found, use the first link as the initial active tab.
$active = $($links.filter('[href="' + location.hash + '"]')[0] || $links[0]);
$active.addClass('active1');
$content = $($active.attr('href'));
// Hide the remaining content
$links.not($active).each(function () {
$($(this).attr('href')).hide();
});
// Bind the click event handler
$(this).on('click', 'a', function (e) {
// Make the old tab inactive.
$active.removeClass('active1');
$content.hide();
// Update the variables with the new link and content
$active = $(this);
$content = $($(this).attr('href'));
// Make the tab active.
$active.addClass('active1');
$content.show();
// Prevent the anchor's default click action
e.preventDefault();
});
});
});
$('#ajax-content').empty().append("<div class='loading'><img src='/wp-content/themes/diy/img/ajax-loader.gif' alt='Loading' /></div>");
$('.show_hide a').removeClass('current');
$(this).addClass('current');
$.ajax({
url: this.href,
success: function (html) {
$("#ajax-content").empty().append(html);
}
});
return false;
});
// Load Ajax Content Step 2 //
$('.slidingDiv2').hide();
$('.show_hide2').show();
$('.show_hide2').click(function () {
$('.slidingDiv2').slideToggle(1600, function () {
$('.show_hide2').addClass('close-tabs');
/* do anything after animation is complete */
$('ul.tabs2').each(function (e) {
var $active, $content, $links = $(this).find('a');
// If the location.hash matches one of the links, use that as the active tab.
// If no match is found, use the first link as the initial active tab.
$active = $($links.filter('[href="' + location.hash + '"]')[0] || $links[0]);
$active.addClass('active2');
$content = $($active.attr('href'));
// Hide the remaining content
$links.not($active).each(function () {
$($(this).attr('href')).hide();
});
// Bind the click event handler
$(this).on('click', 'a', function (e) {
// Make the old tab inactive.
$active.removeClass('active2');
$content.hide();
// Update the variables with the new link and content
$active = $(this);
$content = $($(this).attr('href'));
// Make the tab active.
$active.addClass('active2');
$content.show();
// Prevent the anchor's default click action
e.preventDefault();
});
});
});
$('#ajax-content2').empty().append("<div class='loading'><img src='/wp-content/themes/diy/img/ajax-loader.gif' alt='Loading' /></div>");
$('.show_hide2 a').removeClass('current');
$(this).addClass('current');
$.ajax({
url: this.href,
success: function (html) {
$("#ajax-content2").empty().append(html);
}
});
return false;
});