Question

我已经编写了这个脚本，可以在点击范围时滑动内容。

我需要给顶部菜单一个不同的背景颜色，然后身体需要包含它与div "bblock1"＆＃34;容器＆＃34; "bodymainMAX"。在这样做的情况下，脚本不再能够引用下一个幻灯片作为它的3个div离开。

如果我将"tabbed_content"和"slide_content"放在一起，

工作正常。

我可以使用任何功能来解决这个问题吗？谢谢。

WORKING ：

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

DOESNT WORK：

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

SCRIPT：

$(".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

滑动内容脚本

1 个答案: