滑动内容脚本

我编写了这个脚本，用于在单击span时滑动内容。

我需要给顶部菜单一个不同的背景颜色，然后身体，所以需要包含它与div "bblock1""容器""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/

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;
}