javascript - 滑动内容脚本

Question

我编写了这个脚本，以便在单击跨度时将内容滑过。

我需要为顶部菜单提供与正文不同的背景颜色，因此需要将其包含在 div "bblock1" "container""bodymainMAX" 中。这样做后，脚本将不再能够引用下一个要滑动的 div，因为它的 3 个 div 已经消失。

如果我将“tabbed_content”和“slide_content”放在一起，效果很好。

有什么函数可以用来解决这个问题吗？谢谢。

工作:

<div class="bblock1" style="height:100%;">
<div class="container">
<div class="bodymainMax">
    <div class='tabbed_content'>
        <div class='tabs'>
            <div class='moving_bg'>&nbsp;</div>
            <span class='tab_item'>features</span>
            <span class='tab_item'>Addons</span>
            <span class='tab_item'>Pricing</span>
            <span class='tab_item'>FAQ's</span>
        </div>
        <div class='slide_content'>                        
            <ul class='tabslider'>
                <li>aaaaajjjjmmmmmmmmmmmma</li>
                <li>Bbbbbbbbbbbbb</li>
                <li>Ccccccccccccc</li>
                <li>Ddddddddddddd</li>
            </ul>
        </div>
    </div>
</div>
</div>
</div>

不起作用:

<div class="bblock1" style="height:100%;">
<div class="container">
<div class="bodymainMax">
    <div class='tabbed_content'>
        <div class='tabs'>
            <div class='moving_bg'>&nbsp;</div>
            <span class='tab_item'>features</span>
            <span class='tab_item'>Addons</span>
            <span class='tab_item'>Pricing</span>
            <span class='tab_item'>FAQ's</span>
        </div>
</div>
</div>
</div>
<div class="bblock3" style="height:100%;">
<div class="container">
<div class="bodymainMax">
        <div class='slide_content'>                        
            <ul class='tabslider'>
                <li>aaaaajjjjmmmmmmmmmmmma</li>
                <li>Bbbbbbbbbbbbb</li>
                <li>Ccccccccccccc</li>
                <li>Ddddddddddddd</li>
            </ul>
        </div>
    </div>
</div>
</div>
</div>

脚本:

$(".tab_item").mouseover(function() {
            var $this = $(this);
            $this.parent().find(".moving_bg").stop().animate({
                left: $this.position()['left']
            }, { duration: 300 });
    });
var TabbedContent = {
    current: {i:null, obj:null},
    init: function() {
        $(".tab_item").click(function() {
            var $this = $(this);
            TabbedContent.slideContent($this);
        });
        TabbedContent.current.i = 0;
        TabbedContent.current.obj = $(".tabslider li").eq(0);
    },
    slideContent: function($obj) {
        var $container = $obj.cloest(".tabbed_content");
        var $tabslider = $container.find(".tabslider");
        var i = $obj.index() - 1;
        var $lis = $tabslider.find("li");
        $new = $lis.eq(i);
        if(i === TabbedContent.current.i) {
            return;
        }
        $lis.hide().filter($new.add(TabbedContent.current.obj)).show();
        var margin_1 = (i > TabbedContent.current.i) ? 0 : -$new.width();
        var margin_2 = (i < TabbedContent.current.i) ? 0 : -$new.width();
        $tabslider.stop().css({
            marginLeft: margin_1 + "px"
        }).animate({
            marginLeft: margin_2 + "px"
        }, 1200);
        TabbedContent.current.i = i;
        TabbedContent.current.obj = $new;
    }
}
TabbedContent.init();

JSFIDDLE:

https://jsfiddle.net/r73b14y5/

Answer 1

我猜这是因为您从 tabbed_content 容器中解开选项卡内容。这是更新的 SlideContent 函数:

slideContent: function($obj) {
    var $container = $obj.closest(".tabbed_content"),        
        $contentContainer = $('.bodymainMax'),
          $tabslider = $contentContainer.find(".tabslider");
    var i = $obj.index() - 1;
    var $lis = $tabslider.find("li");
    $new = $lis.eq(i);
    if(i === TabbedContent.current.i) {
        return;
    }
    $lis.hide().filter($new.add(TabbedContent.current.obj)).show();
    var margin_1 = (i > TabbedContent.current.i) ? 0 : -$new.width();
    var margin_2 = (i < TabbedContent.current.i) ? 0 : -$new.width();
    $tabslider.stop().css({
        marginLeft: margin_1 + "px"
    }).animate({
        marginLeft: margin_2 + "px"
    }, 1200);
    TabbedContent.current.i = i;
    TabbedContent.current.obj = $new;
}

正在工作fiddle