Javascript jQueryUI可堆叠（删除不同选项卡上的内容并单击）

注意：我只有几天使用jQuery的经验，尽管我已经四处搜索试图修复这个问题并进行了测试，但它就是不起作用

我正在努力实现的目标：

我在使用jQueryUI时遇到了一些问题。可选，我创建了一个可选，有四个不同的选项卡，每个选项卡显示添加到其中的不同内容（图像类、按钮附加和段落文本附加）

以下是我试图实现的目标的视觉效果：

• 我当前的jQuery=

我的问题

当前，当单击一个选项卡时，它将正确显示该选项卡的内容，但是，一旦再次单击不同/相同的选项卡，它将：

• 添加与上一选项卡重叠的内容

• 每次单击同一选项卡或其他选项卡时，都会添加按钮
• 新图像类被添加并推到上一个选项卡下方
• 段落文本重叠

我需要什么

我需要一种方法，以便在每个选项卡上单击（相同或其他选项卡），它将清除最后一个选项卡的所有以前的内容（任何按钮/段落/图像类）

另外，jQueryUI.Selective（）的另一个问题是，它允许同时选择多个选项卡，如果您将光标拖动到我的JSFIDLE中的选项卡上，您将看到我的意思，我只希望它最多能够选择一个

我的代码出现故障

jQuery

感谢您的阅读，我希望有人能够启发我如何实现这一点，我已经能够添加一个标签发送的视觉图像的外观和感觉，但一旦我将标签切换添加到组合中，它就不起作用了。

试试看

$（文档）.ready（函数（）{
变量内容={
“一号服务器”：“Aenean eu leo quam”
+“佩伦茨克·奥纳雷（Pellentesque ornare sem）位于威尼斯前庭的拉齐尼亚广场。”
+“Donec在eget metus为非mi porta孕妇确定了最佳身份。”
+ "更多你一次又一次地添加一个按钮。你只需要生成一次按钮，还是现在就可以正常工作？@Joker我希望按钮在每个选项卡上只应用一次，不仅仅是按钮，而是文本和图像类被一次又一次地添加。按钮看起来更占主导地位，但它们在做同样的事情。每次单击选项卡时（相同或不同）我希望它能够清除上一个选项卡的内容并应用新的信息。这是一项伟大的工作，谢谢，你能解释一下代码实际上在做什么吗？还有，为什么图像会像那样滑动？从幻灯片中我可以看到屏幕上有很多黑色细条，有没有办法删除滑动功能因为我在报纸上看不到有人提到这件事jQuery@JoeMethven
js
主要利用
server-*
class
参见
ui-selected
中的
sel
来选择合适的
server-*-info
元素，然后利用相同的模式显示
内容
对象中的内容，例如
sel
>server-*
是
contents
对象的属性，返回
text/html
的值。请尝试
。show
，
。hide
duration

at

0

以调整

显示：block

，

显示：none

之间元素的可见呈现；另请参见上面的代码段堆栈，其中

.show

，

.hide

设置为

0

，这非常感谢，我成功地添加了一个短淡入淡出，而不是正在发生的幻灯片功能，在我完全完成之前，我还有最后一件小事情需要添加：我需要有一个默认选项卡（选项卡-1-服务器1/服务器1信息）这将在用户单击任何其他内容之前在顶部选项卡上选择ui并显示顶部选项卡内容，您给我的代码是否可能实现这一点？我尝试添加

code if（$（'#server titles li'）。单击（）==false）{

如果可选项没有被点击，但有点失败，则作为替代。尝试链接

.find（“.server one”）.addClass（“ui-selecting”）.parent（）.data（“ui-selective”）。_mouseStop（false）；

到

$（“#服务器标题”）。可选项（{}）

。看，这很好用了！谢谢你帮了这么多忙

//Tab Content added in relation to tab number
if ($('#elements .elementOne').hasClass('ui-selected')) {
            // Tab 1
            $(".elementOneInfo").addClass("elementOneInfoImage");
            $(".elementOneInfo").append("<button><a href='/clans'>MORE<two</button>");
            $(".elementOneInfo").append("<p>"+textOne+"</p>");
        }
if ($('#elements .elementTwo').hasClass('ui-selected')) {
            //Tab 2 etc.
            $(".elementTwoInfo").addClass("elementTwoInfoImage");
            [...]

<div class="container elements-wrapper">
    <div class="col-md-12">
        <div class="row">

            <!-- Where new content is added -->

            <div class="col-md-7 elements-info">
                <div class="elementOneInfo"></div>
                <div class="elementTwoInfo"></div>
                <div class="elementThreeInfo"></div>
                <div class="elementFourInfo"></div>
            </div>

            <!-- Where tabs exist -->

            <div class="col-md-5 elements-titles-wrapper">
                <ul id="elements">
                    <li class="elementOne light ui-widget-content"><h3>Title1</h3></li>
                    <li class="elementTwo dark ui-widget-content"><h3>Title2</h3></li>
                    <li class="elementThree light ui-widget-content"><h3>Title3</h3></li>
                    <li class="elementFour dark ui-widget-content"><h3>Title4</h3></li>
                </ul>
            </div>
        </div>
    </div>
</div>

/* Tabs */

.elements-titles-wrapper {
    padding:0;
    ul {
        list-style: none;
        padding-left: 0;
    }
    li > h3 {
        color: white;
        margin:0;
        padding: 15px 0 15px 15px;
    }
    .light {
        background-color: $aqua;
    }

    .dark {
        background-color: $dark_aqua;
    }

    .active {
        background-color: #75c5e0;
    }
    .ui-selected {
        background: $light_aqua;
    }
    .ui-selecting {
        background: $light_aqua;
    }
}


/* Tab Content Added */

.elements-info {
    padding:0;
    p {
        color:white;
        font-size:12px;
        background: rgba(0,0,0,.5);
        padding: 10px;
        position:absolute;
        bottom:0;
        margin-bottom: 0;
        @include font(Open-Sans);
    }
    button {
        background: $cream;
        border-radius:5px;
        margin: 5px 0 0 5px;
        a {
            color:$brown;
            @include font(Open-Sans);
            padding: 4px 8px;
            text-decoration: none;
        }
    }

    /* Random Background Images for testing */
    .elementOneInfoImage {
        background: url(http://wallpaperkick.com/wp-content/uploads/2015/02/gray-wallpaper.jpg) no-repeat center right;
        height:224px;
    }
    .elementTwoInfoImage {
        background: url(http://cdn.wonderfulengineering.com/wp-content/uploads/2014/09/red-wallpaper-4.jpg) no-repeat center right;
        height:224px;
    }
    .elementThreeInfoImage {
        background: url(http://cdn.wonderfulengineering.com/wp-content/uploads/2014/09/Green-Wallpaper-3.jpg) no-repeat center right;
        height:224px;
    }
    .elementFourInfoImage {
        background: url(http://walldiskpaper.com/wp-content/uploads/2014/11/Blue-Light-Wallpaper-Image-Picture.png) no-repeat center right;
        height:224px;
    }
}