单击时更改元素内容

Question

尝试创建更改内容的菜单系统。

更简单的二级菜单，保持二级菜单完好但仍然打破主要：

https://jsfiddle.net/ph3ng2fo/35/

您可以看到前两个标签很好，但“订购”和“替换过滤器”没有内容。

两个滑动系统都显示内容，辅助滑动内容菜单嵌套在主系统Li中，这打破了两个系统：

我刚做了3个小提琴，所以你可以看到我想要做的事情：

首先，点击http://jsfiddle.net/3to0neLm/1

后，会出现一个幻灯片li元素

点击一次跨度后的第二个幻灯片谎言元素：http://jsfiddle.net/feto4ymt/1

他们都很好。现在将第二张幻灯片放入第一张幻灯片中的一张照片中（现在它已经分解）：http://jsfiddle.net/ph3ng2fo/34

SCRPIT

//Slide Content
var TabbedContent = {
    current: {i:null, obj:null},
    init: function() {
        $(".tab_item").click(function() {
                $(".tab_item").removeClass("tab_item_color");
    $(this).addClass("tab_item_color");
            var $this = $(this);
            TabbedContent.slideContent($this);
        });
        TabbedContent.current.i = 0;
        TabbedContent.current.obj = $(".tabslider li").eq(0);
    },
    slideContent: function($obj) {
        var $container = $obj.closest(".tabbed_content"),        
            $contentContainer = $('.bodymainMaxS'),
            $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"
        }, 400);
        TabbedContent.current.i = i;
        TabbedContent.current.obj = $new;
    }
}
TabbedContent.init();

    $(".tab_item2").click(function() {
    $(".tab_item2").removeClass("tab_item_color2");
    $(this).addClass("tab_item_color2");
 $(".tabslider2 li").hide().eq($(this).index(".tab_item2")).show(); });