Question

我有一个网页，我正在尝试将bookblock jquery插件添加到nav-tabs中的内容。问题是只有活动选项卡才能正常工作。其他导航标签中的其余图像无效。

以下是导航标签代码：

<ul class="nav nav-tabs">
    <li class="active"><a href="#icecream_book" data-toggle="tab">Dessert Special - Icecream</a></li>
    <li><a href="#paratha_book" data-toggle="tab">Traditional Indian Recipes - Paratha</a></li>
    <li><a href="#italian_book" data-toggle="tab">International Cuisine Recipes - Italian</a></li>
    <li><a href="#ricenpulao_book" data-toggle="tab">Traditional Indian Recipes - Rice and Pulao</a></li>
</ul>
<div class="tab-content">
    <!--Ice Cream Begins-->
    <div id="icecream_book" class="tab-pane fade in active">
            <center>
                <p class="booktitle">"Dessert Special - Icecream"</p>
                <p class="author">by - Pallavi's Kitchen</p>
                <div class="main clearfix">
                    <div class="bb-custom-wrapper">
                        <div id="bb-bookblock" class="bb-bookblock">
                            <div class="bb-item">
                                ...
                            </div>
                            <div class="bb-item">
                                ...
                            </div>
                            <div class="bb-item">
                                ...
                            </div>
                            <div class="bb-item">
                                ...
                            </div>
                        </div>
                        <nav>
                            <a id="bb-nav-first" href="#" class="bb-custom-icon bb-custom-icon-first">First page</a>
                            <a id="bb-nav-prev" href="#" class="bb-custom-icon bb-custom-icon-arrow-left">Previous</a>
                            <a id="bb-nav-next" href="#" class="bb-custom-icon bb-custom-icon-arrow-right">Next</a>
                            <a id="bb-nav-last" href="#" class="bb-custom-icon bb-custom-icon-last">Last page</a>
                        </nav>
                    </div>
                </div>
            </center>
        </div>
        <div id="paratha_book" class="tab-pane fade">
        <center>
            <p class="booktitle">"Traditional Indian Recipes - Paratha"</p>
              <p class="author">by - Pallavi's Kitchen</p>
                        <div class="main clearfix">
                            <div class="bb-custom-wrapper">
                                <div id="bb-bookblock" class="bb-bookblock">
                                    <div class="bb-item">
                                        ...
                                    </div>
                                </div>
                            </div>
                        </div>
                    </center>
                </div>
                <div id="italian_book" class="tab-pane fade">
                    <center>
                        <p class="booktitle">"International Couisine Recipes - Italian"</p>
              <p class="author">by - Pallavi's Kitchen</p>
                        <div class="main clearfix">
                            <div class="bb-custom-wrapper">
                                <div id="bb-bookblock" class="bb-bookblock">
                                    <div class="bb-item">
                                        ...
                                    </div>
                                </div>
                            </div>
                        </div>
                    </center>
                </div>
                <div id="ricenpulao_book" class="tab-pane fade">
                    <center>
                        <p class="booktitle">"Traditional Indian Recipes - Rice and Pulao"</p>
              <p class="author">by - Pallavi's Kitchen</p>
                        <div class="main clearfix">
                            <div class="bb-custom-wrapper">
                                <div id="bb-bookblock" class="bb-bookblock">
                                    <div class="bb-item">
                                        ...
                                    </div>
                                </div>
                            </div>
                        </div>
                    </center>
                </div>
            </div>

以下是bookblock插件的JQuery脚本：

<script>
            var Page = (function() {

                var config = {
                        $bookBlock : $( '#bb-bookblock' ),
                        $navNext : $( '#bb-nav-next' ),
                        $navPrev : $( '#bb-nav-prev' ),
                        $navFirst : $( '#bb-nav-first' ),
                        $navLast : $( '#bb-nav-last' )
                    },
                    init = function() {
                        config.$bookBlock.bookblock( {
                            speed : 800,
                            shadowSides : 0.8,
                            shadowFlip : 0.7
                        } );
                        initEvents();
                    },
                    initEvents = function() {

                        var $slides = config.$bookBlock.children();

                        // add navigation events
                        config.$navNext.on( 'click touchstart', function() {
                            config.$bookBlock.bookblock( 'next' );
                            return false;
                        } );

                        config.$navPrev.on( 'click touchstart', function() {
                            config.$bookBlock.bookblock( 'prev' );
                            return false;
                        } );

                        config.$navFirst.on( 'click touchstart', function() {
                            config.$bookBlock.bookblock( 'first' );
                            return false;
                        } );

                        config.$navLast.on( 'click touchstart', function() {
                            config.$bookBlock.bookblock( 'last' );
                            return false;
                        } );

                        // add swipe events
                        $slides.on( {
                            'swipeleft' : function( event ) {
                                config.$bookBlock.bookblock( 'next' );
                                return false;
                            },
                            'swiperight' : function( event ) {
                                config.$bookBlock.bookblock( 'prev' );
                                return false;
                            }
                        } );

                        // add keyboard events
                        $( document ).keydown( function(e) {
                            var keyCode = e.keyCode || e.which,
                                arrow = {
                                    left : 37,
                                    up : 38,
                                    right : 39,
                                    down : 40
                                };

                            switch (keyCode) {
                                case arrow.left:
                                    config.$bookBlock.bookblock( 'prev' );
                                    break;
                                case arrow.right:
                                    config.$bookBlock.bookblock( 'next' );
                                    break;
                            }
                        } );
                    };

                    return { init : init };

            })();
        </script>
        <script>
                Page.init();
        </script>

以下是ACTIVE TAB的屏幕截图：以下是SECOND TAB的屏幕截图：

我该怎么做才能确保bookblock插件能够访问所有标签？

BookBlock JQuery插件在nav-tabs中无法正常工作

0 个答案: