jQuery代码不起作用-似乎很容易修复-摆弄

Question

$('#tabs2').tabulous({
   effect: 'slideLeft'
});

$('#text1in').keyup(function () {
    var value = $(this).val();
    $('#test1out').text(value);
}).keyup();

$('#text2in').keyup(function () {
    var value = $(this).val();
    $('#test2out').text(value);
}).keyup();

这是新的小提琴： 新的小提琴

它不显示选项卡。 我可以不使用jsfiddle进行此工作。 但是希望您能看到我正在尝试做的事情。 我同时使用了标签脚本和显示字段脚本。 我似乎无法将它们放在一起。 一旦将表单字段添加到tabs-1 div容器中，它就无法工作。 但是，它确实可以在tabs-1 div之外工作。

任何帮助，将不胜感激。

谢谢！

Answer 1

有多个html，css和javascript问题需要解决。 注册插件后，我不得不移动$（）。tabulous（）初始化，解决了HTML过于庞大的问题，解决了CSS样式问题，该问题导致div将您推入的文本框值隐藏在文本框后面。

这是HTML结构的外观示例。 http://www.noupe.com/development/tabulous-js-organize-random-content-in-tabs-with-jquery.html

HTML（完整）：

<div id="tabs">
    <ul>
        <li><a href="#tabs-1" title="">Back</a></li>
        <li><a href="#tabs-2" title="">Back</a></li>
        <li><a href="#tabs-3" title="">Back</a></li>
        <li><a href="#tabs-4" title="">Back</a></li>
        <li><a href="#tabs-5" title="">Back</a></li>
        <li><a href="#tabs-6" title="">Back</a></li>
    </ul>

<div id="tabs_container">
<div id="tabs-1">
    <input id="text1in" type="text" value="some text" />
    <span id="test1out" class="tabulousclear"></span>
    <input id="text2in" type="text" value="some text" />
    <span id="test2out" class="tabulousclear"></span>
</div>

<div id="tabs-2">
    <p>2 - Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc.</p>
</div>

<div id="tabs-3">
    <p>3 - Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc.</p>
</div>

<div id="tabs-4">
    <p>4 - Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc.</p>
</div>

<div id="tabs-5">
    <p>4 - Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc.</p>
</div>

<div id="tabs-6">
    <p>4 - Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc.</p>
</div>

        </div><!--End tabs container-->

    </div><!--End tabs-->

CSS已添加：

#tabs_container div
{
    position: relative !important;
}

Javascript（完整）：

$('#text1in').keyup(function () {
    var value = $(this).val();
    $('#test1out').text(value);
}).keyup();

$('#text2in').keyup(function () {
    var value = $(this).val();
    $('#test2out').text(value);
}).keyup();

/*!
 * strength.js
 * Original author: @aaronlumsden
 * Further changes, comments: @aaronlumsden
 * Licensed under the MIT license
 */
;(function ( $, window, document, undefined ) {

    var pluginName = "tabulous",
        defaults = {
            effect: 'scale'
        };

       // $('<style>body { background-color: red; color: white; }</style>').appendTo('head');

    function Plugin( element, options ) {
        this.element = element;
        this.$elem = $(this.element);
        this.options = $.extend( {}, defaults, options );
        this._defaults = defaults;
        this._name = pluginName;
        this.init();
    }

    Plugin.prototype = {

        init: function() {

            var links = this.$elem.find('a');
            var firstchild = this.$elem.find('li:first-child').find('a');
            var lastchild = this.$elem.find('li:last-child').after('<span class="tabulousclear"></span>');

            if (this.options.effect == 'scale') {
             tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hidescale');
            } else if (this.options.effect == 'slideLeft') {
                 tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hideleft');
            } else if (this.options.effect == 'scaleUp') {
                 tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hidescaleup');
            } else if (this.options.effect == 'flip') {
                 tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hideflip');
            }

            var firstdiv = this.$elem.find('#tabs_container');
            var firstdivheight = firstdiv.find('div:first').height();

            var alldivs = this.$elem.find('div:first').find('div');

            alldivs.css({'position': 'absolute','top':'0px'});

            firstdiv.css('height',firstdivheight+'px');

            firstchild.addClass('tabulous_active');

            links.bind('click', {myOptions: this.options}, function(e) {
                e.preventDefault();

                var $options = e.data.myOptions;
                var effect = $options.effect;

                var mythis = $(this);
                var thisform = mythis.parent().parent().parent();
                var thislink = mythis.attr('href');


                firstdiv.addClass('transition');

                links.removeClass('tabulous_active');
                mythis.addClass('tabulous_active');
                thisdivwidth = thisform.find('div'+thislink).height();

                if (effect == 'scale') {
                    alldivs.removeClass('showscale').addClass('make_transist').addClass('hidescale');
                    thisform.find('div'+thislink).addClass('make_transist').addClass('showscale');
                } else if (effect == 'slideLeft') {
                    alldivs.removeClass('showleft').addClass('make_transist').addClass('hideleft');
                    thisform.find('div'+thislink).addClass('make_transist').addClass('showleft');
                } else if (effect == 'scaleUp') {
                    alldivs.removeClass('showscaleup').addClass('make_transist').addClass('hidescaleup');
                    thisform.find('div'+thislink).addClass('make_transist').addClass('showscaleup');
                } else if (effect == 'flip') {
                    alldivs.removeClass('showflip').addClass('make_transist').addClass('hideflip');
                    thisform.find('div'+thislink).addClass('make_transist').addClass('showflip');
                }

                firstdiv.css('height',thisdivwidth+'px');
            });
        },

        yourOtherFunction: function(el, options) {
            // some logic
        }
    };

    // A really lightweight plugin wrapper around the constructor,
    // preventing against multiple instantiations
    $.fn[pluginName] = function ( options ) {
        return this.each(function () {
            new Plugin( this, options );
        });
    };

})( jQuery, window, document );

$('#tabs').tabulous({
    effect: 'slideLeft'
});  

Answer 2

在您的小提琴中缺少Tabulous插件，如果从代码中删除以下几行，则它可以正常工作或正确安装Tabulous插件。

$('#tabs2').tabulous({
   effect: 'slideLeft'
});

希望这会帮助你。