javascript - FullscreenBookBlock - 在页面上时的活动类

Question

所以我们在这里使用了一个很好的图书馆翻书 - https://tympanus.net/codrops/2012/12/11/fullscreen-pageflip-layout/。您会注意到每个活动页面（bb-item 类），display:block 的样式；被添加。

我在这里要做的只是在该页面处于活动状态时添加一个类。所以例如当页面是 display:block; 它将添加一个 .active 类

我已经浏览了所有文档，但找不到任何帮助，有人可以帮忙吗？

下面是基本标记，但我添加的任何内容都不起作用。

var $container = $( '#container' ),

// the element we will apply the BookBlock plugin to
$bookBlock = $( '#bb-bookblock' ),

// the BookBlock items (bb-item)
$items = $bookBlock.children(),

// index of the current item
current = 0,

// initialize the BookBlock
bb = $( '#bb-bookblock' ).bookblock( {
    speed : 800,
    perspective : 2000,
    shadowSides : 0.8,
    shadowFlip  : 0.4,
    // after each flip...
    onEndFlip : function(old, page, isLimit) {
        
        // update the current value
        current = page;

        // update the selected item of the table of contents (TOC)
        updateTOC();

        // show and/or hide the navigation arrows
        updateNavigation( isLimit );

        // initialize the jScrollPane on the content div for the new item
        setJSP( 'init' );

        // destroy jScrollPane on the content div for the old item
        setJSP( 'destroy', old );

    }
} ),
// the navigation arrows
$navNext = $( '#bb-nav-next' ),
$navPrev = $( '#bb-nav-prev' ).hide(),

// the table of content items
$menuItems = $container.find( 'ul.menu-toc > li' ),

// button to open the TOC
$tblcontents = $( '#tblcontents' ),

transEndEventNames = {
    'WebkitTransition': 'webkitTransitionEnd',
    'MozTransition': 'transitionend',
    'OTransition': 'oTransitionEnd',
    'msTransition': 'MSTransitionEnd',
    'transition': 'transitionend'
},

// transition event name
transEndEventName = transEndEventNames[Modernizr.prefixed('transition')],

// check if transitions are supported
supportTransitions = Modernizr.csstransitions;

我们可以将事件添加到以下内容中：-

function init() {

    // initialize jScrollPane on the content div of the first item
    setJSP( 'init' );
    initEvents();

}

标签： javascripthtmljquerycss