このスクリプトを使用して、コンテンツに効果を追加しています (フリップ効果とタブ)。
<script type="text/javascript" >
$('document').ready(function () {
$('#flip-container').quickFlip();
$('#flip-navigation li a').each(function () {
$(this).click(function () {
$('#flip-navigation li').each(function () {
$(this).removeClass('selected');
});
$(this).parent().addClass('selected');
var flipid = $(this).attr('id').substr(4);
$('#flip-container').quickFlipper({}, flipid, 1);
return false;
});
});
});
ただし、.load (ページをロードするため) の後、効果が消え、タブのすべてのコンテンツが表示されます。
コンテンツの読み込みに使用するコードは次のとおりです。
$(function () {
if (Modernizr.history) {
var newHash = "",
$mainContent = $("#main-content"),
$pageWrap = $("#page-wrap"),
baseHeight = 0,
$el;
$pageWrap.height($pageWrap.height());
baseHeight = $pageWrap.height() - $mainContent.height();
$("nav").delegate("a", "click", function () {
_link = $(this).attr("href");
history.pushState(null, null, _link);
loadContent(_link);
return false;
});
function loadContent(href) {
$mainContent
.find("#guts")
.fadeOut(200, function () {
$mainContent.hide().load(href + " #guts", function () {
$mainContent.fadeIn(200, function () {
$pageWrap.animate({
height: baseHeight + $mainContent.height() + "px"
});
});
$("nav a").removeClass("current");
console.log(href);
$("nav a[href$=" + href + "]").addClass("current");
});
});
}
$(window).bind('popstate', function () {
_link = location.pathname.replace(/^.*[\\\/]/, ''); //get filename only
loadContent(_link);
});
} // otherwise, history is not supported, so nothing fancy here.
});
それらを否定しない方法はありますか?一部のトピックでは on() 関数を使用していましたが、ここでの使用方法がよくわかりません。可能であれば、事前にどこかをクリックしなくても機能するようにしたいと思います。
サイトへのリンクはこちらです。ページ Acceuil と Semaine Prochaine のみが機能します。クイックフリップは 2 番目のもので使用されます。Acceuil にもいくつかの効果があるはずですが (ここのように)、効果は最初のロードでのみ機能します。
更新されたソリューションは次のとおりです。
function loadContent(href) {
$mainContent
.find("#guts")
.fadeOut(200, function () {
$mainContent.hide().load(href + " #guts", function () {
$.getScript('js/jquery.quickflip.min.js', function () {
$('#flip-container').quickFlip();
$('#flip-navigation li a').each(function () {
$(this).click(function () {
$('#flip-navigation li').each(function () {
$(this).removeClass('selected');
});
$(this).parent().addClass('selected');
var flipid = $(this).attr('id').substr(4);
$('#flip-container').quickFlipper({}, flipid, 1);
return false;
});
});
});
$.getScript('tablecloth/tablecloth.js', function () {
tablecloth();
});
$mainContent.fadeIn(200, function () {
$pageWrap.animate({
height: baseHeight + $mainContent.height() + "px"
});
});
$("nav a").removeClass("current");
console.log(href);
$("nav a[href$=" + href + "]").addClass("current");
});
});
}