多文本滚动问题

Question

我正在尝试使用二维文本滚动工作，我可以在一个文本上垂直滚动，然后切换选项卡（jquery工具选项卡）以查看其他文本。问题是每个文本的长度不同，因此我需要相应地调整我的垂直导航。然而，每当我尝试这样做时，只有第一个文本实际上正常工作，其他文本似乎搞砸了。如果有人冒险尝试并破译它，我已经包含了下面的代码。我试图说清楚，但无疑需要解释。

jquery的：

$(function(){
    var scrollClass = $('.items div');
    var upClass = $('.up');
    var downClass = $('.down');
    var hiddenClass = "disabled";
    var leftClass = $('.backward');
    var rightClass = $('.forward');
    var activeClass = $('.active');
    var pageSize = 700;
    var scrollSpeed = 500;
    var ct = $('.items').children("div").size();  
    var index = 1;

    //document.write("<p>" + index + " " + ct + "</p>");
    //document.write("<p>" + offset.top + " " + $(index).height() + "</p>");
    upClass.addClass(hiddenClass);

    if(scrollClass.height()< pageSize){
        downClass.addClass(hiddenClass);
    }

    downClass.click(function() {

        scrollClass.animate({
            top: '-='+pageSize+'px'
            }
            ,scrollSpeed)
        upClass.removeClass(hiddenClass);
        var offset = scrollClass.offset();
        if(offset.top -(2*pageSize) < -$(index).height()){
            downClass.addClass(hiddenClass);
        }

    });

    upClass.click(function() {

        scrollClass.animate({
            top: '+='+pageSize+'px'
            }
            ,scrollSpeed)
        downClass.removeClass(hiddenClass); 
        var offset = scrollClass.offset();
        if(offset.top + pageSize > 0){
            upClass.addClass(hiddenClass);
        }
    }); 

    leftClass.click(function() {

        scrollClass.css("top","0px")
        $(index).removeClass(activeClass);

        if(index == 1){
            $(ct).addClass(activeClass);
            index = ct;
        } else {                
            $(index).prev().addClass(activeClass);
            index--;
        }

        upClass.addClass(hiddenClass);

        if($(index).height()< pageSize){
            downClass.addClass(hiddenClass);
        }
    }); 

    rightClass.click(function() {

        scrollClass.css("top","0px")
        $(index).removeClass(activeClass);

        if(index == ct){
            $(".1").addClass(activeClass);
            index = 1;
        } else {                
            $(index).next().addClass(activeClass);
            index++;
        }

        upClass.addClass(hiddenClass);

        if(scrollClass.height()< pageSize){
            downClass.addClass(hiddenClass);
        }
    }); 
});

$(function() {

    $(".slidetabs").tabs(".items > div", {
//this onclick breaks the function
    /*onClick: function() {
        $(this).addClass("generic");
        scrollClass.css("top","0px");
        upClass.addClass(hiddenClass);          
        if(scrollClass.height()< pageSize){
            downClass.addClass(hiddenClass);
        }
    },*/
    // enable "cross-fading" effect
    effect: 'fade',
    fadeInSpeed:"slow",
    fadeOutSpeed: "slow",

    // start from the beginning after the last tab
    rotate: true

// use the slideshow plugin. It accepts its own configuration
    }).slideshow();


});

和html：

<div class="scrollable">
    <div class="items">
        <div class="1 active" style="display: block; ">               
            <h1>Lorem ipsum ne justo</h1>
            <p>Bonorum has. His ut cibo quas tantas, vis ut probo adhuc definiebas, has at meis debet vulputate. No sed velit essent suavitate, in pro decore ceteros temporibus, usu in odio offendit theophrastus. Mel labore indoctum cu, ad soleat admodum delicatissimi sed, mei viris tritani ullamcorper eu. Ut vim simul aperiam.</p>
            <p>Eu eleifend repudiandae has. Mea eu ridens aliquam. Nisl aeque sit ut, posse dolor utinam cum in. Ad timeam sapientem eos, et eripuit inermis nam. Eos integre voluptaria ne, iriure concludaturque ut eum.</p>
            <p>Vis erant intellegat in. Soleat legere no ius, usu ex laoreet molestie. Sit eu sint inermis. Ea zzril scribentur pro.</p>
            <h1>Tempor essent appetere</h1>
            <p>Ius mutat commune expetendis in. Nam et quas sensibus reprimique, vix no erat soluta suavitate. At mel eius dictas latine. Corrumpit inciderint reformidans sed no, no usu omnis utinam noluisse.</p>
            <p>Sit et, an ius nihil apeirian. Eu posse tempor iuvaret cum. No diam dolor sea, postea mnesarchum ne ius, vel no utinam ignota dolores. Malis suscipit accusamus his ne, utinam assentior prodesset ea eam, facer partem antiopam et cum.</p>
            <p>Probo debet quaestio an eos, no mel assum iracundia delicatissimi, rebum facete utroque sed ex. Eu melius invidunt repudiandae vix, eu paulo reformidans deterruisset duo, solum voluptaria efficiantur ea mel. Qui summo zzril alienum et. Eu est ferri iuvaret, mazim epicurei sententiae ut cum, modo reque intellegat ex vix. Vim eu tibique accusamus, quot electram at qui.</p>
            <p>Ex iisque eleifend periculis has. Sit aeterno virtute partiendo ei, eam nonumy bonorum adolescens ad. Ut nec suas vocent ornatus, cetero legendos constituam mea ea, pri cu delenit iracundia. Mundi decore nec te.</p>
            <h1>Soleat civibus in pri</h1>
            <p>In petentium erroribus percipitur per. Takimata accommodare ius ut, eam no postulant urbanitas. Qui ei tantas consectetuer, quis dictas euripidis duo ei. Quaeque democritum concludaturque has ne.</p>
            <p>Blandit insolens constituto vix an. Has diam wisi in, eum unum repudiare no. Sit at virtute rationibus, qui vitae explicari cu. Vim ne singulis voluptatum, sed puto accusata salutandi ei. Ad mel civibus adversarium.</p>
            <p>Per ne solum vivendo, fabulas dolorem vivendo in pro. Nec duis ignota cotidieque no, an per possit nostrum. Pro detraxit definitionem eu. Vivendo officiis no nam, eu has reque maiestatis percipitur, dolore reprimique accommodare cum ad. No utinam voluptua oportere pri, augue sonet dicant ei sea.</p>
            <p>Sit et, an ius nihil apeirian. Eu posse tempor iuvaret cum. No diam dolor sea, postea mnesarchum ne ius, vel no utinam ignota dolores. Malis suscipit accusamus his ne, utinam assentior prodesset ea eam, facer partem antiopam et cum.</p>
            <h1>Lorem ipsum ne justo</h1>
            <p>Bonorum has. His ut cibo quas tantas, vis ut probo adhuc definiebas, has at meis debet vulputate. No sed velit essent suavitate, in pro decore ceteros temporibus, usu in odio offendit theophrastus. Mel labore indoctum cu, ad soleat admodum delicatissimi sed, mei viris tritani ullamcorper eu. Ut vim simul aperiam.</p>
            <p>Blandit insolens constituto vix an. Has diam wisi in, eum unum repudiare no. Sit at virtute rationibus, qui vitae explicari cu. Vim ne singulis voluptatum, sed puto accusata salutandi ei. Ad mel civibus adversarium.</p>
            <p>Ius mutat commune expetendis in. Nam et quas sensibus reprimique, vix no erat soluta suavitate. At mel eius dictas latine. Corrumpit inciderint reformidans sed no, no usu omnis utinam noluisse.</p>
            <p>Probo debet quaestio an eos, no mel assum iracundia delicatissimi, rebum facete utroque sed ex. Eu melius invidunt repudiandae vix, eu paulo reformidans deterruisset duo, solum voluptaria efficiantur ea mel. Qui summo zzril alienum et. Eu est ferri iuvaret, mazim epicurei sententiae ut cum, modo reque intellegat ex vix. Vim eu tibique accusamus, quot electram at qui.</p>
            <p>Eu eleifend repudiandae has. Mea eu ridens aliquam. Nisl aeque sit ut, posse dolor utinam cum in. Ad timeam sapientem eos, et eripuit inermis nam. Eos integre voluptaria ne, iriure concludaturque ut eum.</p>
            <p>Sit et, an ius nihil apeirian. Eu posse tempor iuvaret cum. No diam dolor sea, postea mnesarchum ne ius, vel no utinam ignota dolores. Malis suscipit accusamus his ne, utinam assentior prodesset ea eam, facer partem antiopam et cum.</p>
            <p>Vis erant intellegat in. Soleat legere no ius, usu ex laoreet molestie. Sit eu sint inermis. Ea zzril scribentur pro.</p>
            <h1>Tempor essent appetere</h1>
            <p>Ius mutat commune expetendis in. Nam et quas sensibus reprimique, vix no erat soluta suavitate. At mel eius dictas latine. Corrumpit inciderint reformidans sed no, no usu omnis utinam noluisse.</p>
            <p>Sit et, an ius nihil apeirian. Eu posse tempor iuvaret cum. No diam dolor sea, postea mnesarchum ne ius, vel no utinam ignota dolores. Malis suscipit accusamus his ne, utinam assentior prodesset ea eam, facer partem antiopam et cum.</p>
            <p>Blandit insolens constituto vix an. Has diam wisi in, eum unum repudiare no. Sit at virtute rationibus, qui vitae explicari cu. Vim ne singulis voluptatum, sed puto accusata salutandi ei. Ad mel civibus adversarium.</p>
            <p>Per ne solum vivendo, fabulas dolorem vivendo in pro. Nec duis ignota cotidieque no, an per possit nostrum. Pro detraxit definitionem eu. Vivendo officiis no nam, eu has reque maiestatis percipitur, dolore reprimique accommodare cum ad. No utinam voluptua oportere pri, augue sonet dicant ei sea.</p>
            <p>Probo debet quaestio an eos, no mel assum iracundia delicatissimi, rebum facete utroque sed ex. Eu melius invidunt repudiandae vix, eu paulo reformidans deterruisset duo, solum voluptaria efficiantur ea mel. Qui summo zzril alienum et. Eu est ferri iuvaret, mazim epicurei sententiae ut cum, modo reque intellegat ex vix. Vim eu tibique accusamus, quot electram at qui.</p>
            <p>Ex iisque eleifend periculis has. Sit aeterno virtute partiendo ei, eam nonumy bonorum adolescens ad. Ut nec suas vocent ornatus, cetero legendos constituam mea ea, pri cu delenit iracundia. Mundi decore nec te.</p>
            <h1>Soleat civibus in pri</h1>
            <p>In petentium erroribus percipitur per. Takimata accommodare ius ut, eam no postulant urbanitas. Qui ei tantas consectetuer, quis dictas euripidis duo ei. Quaeque democritum concludaturque has ne.</p>
            <p>Blandit insolens constituto vix an. Has diam wisi in, eum unum repudiare no. Sit at virtute rationibus, qui vitae explicari cu. Vim ne singulis voluptatum, sed puto accusata salutandi ei. Ad mel civibus adversarium.</p>
            <p>Ius mutat commune expetendis in. Nam et quas sensibus reprimique, vix no erat soluta suavitate. At mel eius dictas latine. Corrumpit inciderint reformidans sed no, no usu omnis utinam noluisse.</p>
            <p>Sit et, an ius nihil apeirian. Eu posse tempor iuvaret cum. No diam dolor sea, postea mnesarchum ne ius, vel no utinam ignota dolores. Malis suscipit accusamus his ne, utinam assentior prodesset ea eam, facer partem antiopam et cum.</p>
            <p>Per ne solum vivendo, fabulas dolorem vivendo in pro. Nec duis ignota cotidieque no, an per possit nostrum. Pro detraxit definitionem eu. Vivendo officiis no nam, eu has reque maiestatis percipitur, dolore reprimique accommodare cum ad. No utinam voluptua oportere pri, augue sonet dicant ei sea.</p>
            <p>Sit et, an ius nihil apeirian. Eu posse tempor iuvaret cum. No diam dolor sea, postea mnesarchum ne ius, vel no utinam ignota dolores. Malis suscipit accusamus his ne, utinam assentior prodesset ea eam, facer partem antiopam et cum.</p>
        </div>
        <div class="2" style="display: none; ">
            <h1>Soleat civibus in pri</h1>
            <p>In petentium erroribus percipitur per. Takimata accommodare ius ut, eam no postulant urbanitas. Qui ei tantas consectetuer, quis dictas euripidis duo ei. Quaeque democritum concludaturque has ne.</p>
            <p>Blandit insolens constituto vix an. Has diam wisi in, eum unum repudiare no. Sit at virtute rationibus, qui vitae explicari cu. Vim ne singulis voluptatum, sed puto accusata salutandi ei. Ad mel civibus adversarium.</p>
            <p>Per ne solum vivendo, fabulas dolorem vivendo in pro. Nec duis ignota cotidieque no, an per possit nostrum. Pro detraxit definitionem eu. Vivendo officiis no nam, eu has reque maiestatis percipitur, dolore reprimique accommodare cum ad. No utinam voluptua oportere pri, augue sonet dicant ei sea.</p>
            <p>Sit et, an ius nihil apeirian. Eu posse tempor iuvaret cum. No diam dolor sea, postea mnesarchum ne ius, vel no utinam ignota dolores. Malis suscipit accusamus his ne, utinam assentior prodesset ea eam, facer partem antiopam et cum.</p>
            <h1>Lorem ipsum ne justo</h1>
            <p>Bonorum has. His ut cibo quas tantas, vis ut probo adhuc definiebas, has at meis debet vulputate. No sed velit essent suavitate, in pro decore ceteros temporibus, usu in odio offendit theophrastus. Mel labore indoctum cu, ad soleat admodum delicatissimi sed, mei viris tritani ullamcorper eu. Ut vim simul aperiam.</p>
            <p>Blandit insolens constituto vix an. Has diam wisi in, eum unum repudiare no. Sit at virtute rationibus, qui vitae explicari cu. Vim ne singulis voluptatum, sed puto accusata salutandi ei. Ad mel civibus adversarium.</p>
            <p>Ius mutat commune expetendis in. Nam et quas sensibus reprimique, vix no erat soluta suavitate. At mel eius dictas latine. Corrumpit inciderint reformidans sed no, no usu omnis utinam noluisse.</p>
            <p>Probo debet quaestio an eos, no mel assum iracundia delicatissimi, rebum facete utroque sed ex. Eu melius invidunt repudiandae vix, eu paulo reformidans deterruisset duo, solum voluptaria efficiantur ea mel. Qui summo zzril alienum et. Eu est ferri iuvaret, mazim epicurei sententiae ut cum, modo reque intellegat ex vix. Vim eu tibique accusamus, quot electram at qui.</p>
            <p>Eu eleifend repudiandae has. Mea eu ridens aliquam. Nisl aeque sit ut, posse dolor utinam cum in. Ad timeam sapientem eos, et eripuit inermis nam. Eos integre voluptaria ne, iriure concludaturque ut eum.</p>
            <p>Sit et, an ius nihil apeirian. Eu posse tempor iuvaret cum. No diam dolor sea, postea mnesarchum ne ius, vel no utinam ignota dolores. Malis suscipit accusamus his ne, utinam assentior prodesset ea eam, facer partem antiopam et cum.</p>
            <p>Vis erant intellegat in. Soleat legere no ius, usu ex laoreet molestie. Sit eu sint inermis. Ea zzril scribentur pro.</p>
            <h1>Lorem ipsum ne justo</h1>
            <p>Bonorum has. His ut cibo quas tantas, vis ut probo adhuc definiebas, has at meis debet vulputate. No sed velit essent suavitate, in pro decore ceteros temporibus, usu in odio offendit theophrastus. Mel labore indoctum cu, ad soleat admodum delicatissimi sed, mei viris tritani ullamcorper eu. Ut vim simul aperiam.</p>
            <p>Eu eleifend repudiandae has. Mea eu ridens aliquam. Nisl aeque sit ut, posse dolor utinam cum in. Ad timeam sapientem eos, et eripuit inermis nam. Eos integre voluptaria ne, iriure concludaturque ut eum.</p>
            <p>Vis erant intellegat in. Soleat legere no ius, usu ex laoreet molestie. Sit eu sint inermis. Ea zzril scribentur pro.</p>
            <h1>Tempor essent appetere</h1>
            <p>Ius mutat commune expetendis in. Nam et quas sensibus reprimique, vix no erat soluta suavitate. At mel eius dictas latine. Corrumpit inciderint reformidans sed no, no usu omnis utinam noluisse.</p>
            <p>Sit et, an ius nihil apeirian. Eu posse tempor iuvaret cum. No diam dolor sea, postea mnesarchum ne ius, vel no utinam ignota dolores. Malis suscipit accusamus his ne, utinam assentior prodesset ea eam, facer partem antiopam et cum.</p>
            <p>Probo debet quaestio an eos, no mel assum iracundia delicatissimi, rebum facete utroque sed ex. Eu melius invidunt repudiandae vix, eu paulo reformidans deterruisset duo, solum voluptaria efficiantur ea mel. Qui summo zzril alienum et. Eu est ferri iuvaret, mazim epicurei sententiae ut cum, modo reque intellegat ex vix. Vim eu tibique accusamus, quot electram at qui.</p>
            <p>Ex iisque eleifend periculis has. Sit aeterno virtute partiendo ei, eam nonumy bonorum adolescens ad. Ut nec suas vocent ornatus, cetero legendos constituam mea ea, pri cu delenit iracundia. Mundi decore nec te.</p>
    </div>
        <div class="3" style="display: none; ">
            <h1>Lorem ipsum ne justo</h1>
            <p>Bonorum has. His ut cibo quas tantas, vis ut probo adhuc definiebas, has at meis debet vulputate. No sed velit essent suavitate, in pro decore ceteros temporibus, usu in odio offendit theophrastus. Mel labore indoctum cu, ad soleat admodum delicatissimi sed, mei viris tritani ullamcorper eu. Ut vim simul aperiam.</p>
            <p>Eu eleifend repudiandae has. Mea eu ridens aliquam. Nisl aeque sit ut, posse dolor utinam cum in. Ad timeam sapientem eos, et eripuit inermis nam. Eos integre voluptaria ne, iriure concludaturque ut eum.</p>
            <p>Vis erant intellegat in. Soleat legere no ius, usu ex laoreet molestie. Sit eu sint inermis. Ea zzril scribentur pro.</p>
            <h1>Tempor essent appetere</h1>
            <p>Ius mutat commune expetendis in. Nam et quas sensibus reprimique, vix no erat soluta suavitate. At mel eius dictas latine. Corrumpit inciderint reformidans sed no, no usu omnis utinam noluisse.</p>
            <p>Sit et, an ius nihil apeirian. Eu posse tempor iuvaret cum. No diam dolor sea, postea mnesarchum ne ius, vel no utinam ignota dolores. Malis suscipit accusamus his ne, utinam assentior prodesset ea eam, facer partem antiopam et cum.</p>
            <p>Probo debet quaestio an eos, no mel assum iracundia delicatissimi, rebum facete utroque sed ex. Eu melius invidunt repudiandae vix, eu paulo reformidans deterruisset duo, solum voluptaria efficiantur ea mel. Qui summo zzril alienum et. Eu est ferri iuvaret, mazim epicurei sententiae ut cum, modo reque intellegat ex vix. Vim eu tibique accusamus, quot electram at qui.</p>
            <p>Ex iisque eleifend periculis has. Sit aeterno virtute partiendo ei, eam nonumy bonorum adolescens ad. Ut nec suas vocent ornatus, cetero legendos constituam mea ea, pri cu delenit iracundia. Mundi decore nec te.</p>
    </div>
</div>

<div class="slidetabs"><a href="http://flowplayer.org/tools/demos/tabs/slideshow.htm#" class="current"></a> <a href="http://flowplayer.org/tools/demos/tabs/slideshow.htm#" class=""></a><a href="http://flowplayer.org/tools/demos/tabs/slideshow.htm#" class=""></a></div>

感谢您对此提供任何帮助/建议。

Answer 1

我回答了自己的问题。简而言之，我需要更加具体地选择元素。如果有人有兴趣，这是工作代码：

$(function(){
    var scrollClass = $('.items div');
    var upClass = $('.up');
    var downClass = $('.down');
    var hiddenClass = "disabled";
    var leftClass = $('.backward');
    var rightClass = $('.forward');
    var pageSize = 700;
    var scrollSpeed = 500;
    var ct = $('.items').children("div").size();  
    var index = "1";
    var temp = $("."+index);
    //document.write("<p>" + index + " " + ct + "</p>");
    //document.write("<p>" + offset.top + " " + $(index).height() + "</p>");
    upClass.addClass(hiddenClass);
    if(temp.height()< pageSize){
        downClass.addClass(hiddenClass);
    }

    downClass.click(function() {

        var temp = $("."+index);
        scrollClass.animate({
            top: '-='+pageSize+'px'
            }
            ,scrollSpeed)
        upClass.removeClass(hiddenClass);
        var offset = temp.offset();
        if(offset.top -(2*pageSize) < -temp.height()){
            downClass.addClass(hiddenClass);
        }

    });

    upClass.click(function() {

        var temp = $("."+index);
        scrollClass.animate({
            top: '+='+pageSize+'px'
            }
            ,scrollSpeed)
        downClass.removeClass(hiddenClass); 
        var offset = temp.offset();
        if(offset.top + pageSize > 0){
            upClass.addClass(hiddenClass);
        }
    }); 

    leftClass.click(function() {

        scrollClass.css("top","0px");

        if(index =="1"){
            index = ct;
        } else {                
            index--;
        }

        upClass.addClass(hiddenClass);
        downClass.removeClass(hiddenClass);
        var temp = $("."+index);

        if(temp.height()< pageSize){
            downClass.addClass(hiddenClass);
        }
    }); 

    rightClass.click(function() {

        scrollClass.css("top","0px");

        if(index == ct){
            index = "1";
        } else {                
            index++;
        }

        upClass.addClass(hiddenClass);
        downClass.removeClass(hiddenClass);
        var temp = $("."+index);

        if(temp.height()< pageSize){
            downClass.addClass(hiddenClass);
        }
    }); 
});

$(function() {
    $(".slidetabs").tabs(".items > div", {

    effect: 'fade',
    fadeInSpeed:"slow",
    fadeOutSpeed: "slow",
    rotate: true
    }).slideshow();
});