jQueryUI Stackable（删除不同选项卡上的内容点击）

Question

注意：我只有几天使用 jQuery 的经验，尽管我四处搜索以尝试解决问题并进行了测试，但它不起作用。

我要实现的目标：

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

下面是我要实现的目标的直观视图： http://puu.sh/gELQi/211165f55a.png

我目前的jQuery = http://jsfiddle.net/p5gsby49/8/

我的问题

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

添加与上一个选项卡重叠的内容
1. 每次点击相同或其他标签时都会添加按钮
2. 新图像 class 已添加并推送到上一个选项卡下方
3. 段落文字重叠

我需要的

我需要一种方法，以便在每个选项卡上单击（相同或其他选项卡）它会清除最后一个选项卡（任何 buttons/paragraphs/image classes).

此外，jQueryUI .selectable() 的另一个问题是它允许一次 selecting 多个选项卡，如果您拖动将光标放在我的 JSFiddle 中的选项卡上，您会明白我的意思，我只希望它最多能够 select 一个。

我的代码崩溃了

jQuery

//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");
            [...]

HTML

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

SCSS

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

感谢阅读，我希望有人可以启发我如何实现这一点，我已经能够添加我用一个选项卡发送的视觉图像的外观，但尽快我将选项卡的切换添加到混音中，但它不起作用。

Answer 1

尝试

$(document).ready(function () {
    var content = {
        "server-one": "Aenean eu leo quam."
          + " Pellentesque ornare sem lacinia quam venenatis vestibulum."
          + " Donec id elit non mi porta gravida at eget metus."
          + " <button><a href='/clans'>MORE<two</button>",
        "server-two": "Nulla vitae elit libero, a pharetra augue."
          + " Etiam porta sem malesuada magna mollis euismod."
          + " <button><a href='/clans'>MORE<two</button>",
        "server-three": "Cum sociis natoque penatibus et magnis "
          + "dis parturient montes, nascetur ridiculus mus."
          + " Nullam quis risus eget urna mollis ornare vel eu leo."
          + " <button><a href='/clans'>MORE<two</button>",
        "server-four": "Donec id elit non mi porta gravida at eget metus."
          + " Aenean eu leo quam."
          + " Pellentesque ornare sem lacinia quam venenatis vestibulum."
          + " <button><a href='/clans'>MORE<two</button>"
    };

    $('#server-titles').selectable({
        selected: function (event, ui) {
            var sel = $(ui.selected).attr("class").split(" ")[0];
            var elem = $(".row [class^=" + sel.concat("-info") + "]");
            elem.html(content[sel]).show(0).siblings().hide(0);
             
        }
    });
});

div[class$=image] {
    display:none;
}

/* Server Tabs */
/* line 423, ../sass/home.scss */
.server-titles-wrapper {
  padding: 0;
}
/* line 425, ../sass/home.scss */
.server-titles-wrapper ul {
  list-style: none;
  padding-left: 0;
}
/* line 429, ../sass/home.scss */
.server-titles-wrapper .server > h3 {
  color: white;
  margin: 0;
  padding: 15px 0 15px 15px;
}
/* line 434, ../sass/home.scss */
.server-titles-wrapper .light {
  background-color: #6bb3cc;
}
/* line 438, ../sass/home.scss */
.server-titles-wrapper .dark {
  background-color: #61a4ba;
}
/* line 442, ../sass/home.scss */
.server-titles-wrapper .active {
  background-color: #75c5e0;
}
/* line 445, ../sass/home.scss */
.server-titles-wrapper .ui-selected {
  background: #75c5e0;
}
/* line 448, ../sass/home.scss */
.server-titles-wrapper .ui-selecting {
  background: #75c5e0;
}

/* line 453, ../sass/home.scss */
.server-info {
  padding: 0;
}
/* line 455, ../sass/home.scss */
.server-info p {
  color: white;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.5);
  padding: 10px;
  position: absolute;
  bottom: 0;
  margin-bottom: 0;
  font-family: Open-Sans, Trebuchet MS, Serif;
}
/* line 465, ../sass/home.scss */
.server-info button {
  background: #f4dab9;
  border-radius: 5px;
  margin: 10px 0 0 10px;
}
/* line 469, ../sass/home.scss */
.server-info button a {
  color: #946d3b;
  font-family: Open-Sans, Trebuchet MS, Serif;
  padding: 4px 8px;
  text-decoration: none;
}
/* line 476, ../sass/home.scss */
.server-info .server-one-info-image {
  background: url(../img/clans.jpg) no-repeat center right;
  height: 224px;
}
/* line 480, ../sass/home.scss */
.server-info .server-two-info-image {
  background: url(../img/test.jpg) no-repeat center right;
  height: 224px;
}

.server-info .server-one-info-image {
    background: url(http://wallpaperkick.com/wp-content/uploads/2015/02/gray-wallpaper.jpg) no-repeat center right;
    height:224px;
}
.server-info .server-two-info-image {
    background: url(http://cdn.wonderfulengineering.com/wp-content/uploads/2014/09/red-wallpaper-4.jpg) no-repeat center right;
    height:224px;
}
.server-info .server-three-info-image {
    background: url(http://cdn.wonderfulengineering.com/wp-content/uploads/2014/09/Green-Wallpaper-3.jpg) no-repeat center right;
    height:224px;
}
.server-info .server-four-info-image {
    background: url(http://walldiskpaper.com/wp-content/uploads/2014/11/Blue-Light-Wallpaper-Image-Picture.png) no-repeat center right;
    height:224px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script src="https://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js">
</script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container server-wrapper">
    <div class="col-md-12">
        <div class="row">
            <div class="col-md-7 server-info">
                <div class="server-one-info server-one-info-image"></div>
                <div class="server-two-info server-two-info-image"></div>
                <div class="server-three-info server-three-info-image"></div>
                <div class="server-four-info server-four-info-image"></div>
            </div>
            <div class="col-md-5 server-titles-wrapper">
                <div id="display"></div>
                <ul id="server-titles">
                    <li class="server-one light server ui-widget-content">
                        <h3>Title1</h3>
                    </li>
                    <li class="server-two dark server ui-widget-content">
                        <h3>Title2</h3>
                    </li>
                    <li class="server-three light server ui-widget-content">
                        <h3>Title3</h3>
                    </li>
                    <li class="server-four dark server ui-widget-content">
                        <h3>Title4</h3>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

jsfiddle http://jsfiddle.net/p5gsby49/12/

jQueryUI Stackable（删除不同选项卡上的内容点击）

jQueryUI Stackable (Remove contents on different tab click)

javascript

jquery

jquery-ui

tabs

selectable