jQueryUI Stackable (удаление содержимого при нажатии на другую вкладку)

Question

jQueryUI Stackable (удаление содержимого при нажатии на другую вкладку)

Примечание: у меня есть только несколько дней опыта работы с jQuery, хотя я искал вокруг, чтобы попытаться исправить проблему, и протестировал, однако она просто не работает.

Чего я пытаюсь добиться:

У меня возникли некоторые проблемы с.selectable jQueryUI, я создал Selectable с четырьмя различными вкладками, каждая вкладка отображает различный контент, добавленный к нему (класс для изображения, приложение для кнопки и приложение для текста абзаца).

Вот визуальный взгляд на то, чего я пытаюсь достичь: http://puu.sh/gELQi/211165f55a.png

Мой текущий jQuery = http://jsfiddle.net/p5gsby49/8/

Моя проблема

В настоящее время при нажатии на одну вкладку она будет правильно отображать содержимое этой вкладки, однако, как только вы снова щелкнете по другой / той же вкладке, она будет:

Добавьте содержимое, перекрывающее предыдущую вкладку
1. Кнопка добавляется при каждом новом нажатии той же или другой вкладки
2. Новый класс изображений добавлен и помещен под предыдущую вкладку
3. Текст параграфа перекрывается

Что мне нужно

Мне нужен способ, чтобы при каждом нажатии вкладки (та же или другая вкладка) он очищал все предыдущее содержимое последней вкладки (любые кнопки / абзацы / классы изображений).

Кроме того, еще одна проблема с jQueryUI .selectable() состоит в том, что он позволяет выбирать несколько вкладок одновременно, если вы перетащите курсор на вкладки в моем JSFiddle, вы увидите, что я имею в виду, я только хочу, чтобы он мог выбирать один на макс.

Мой код сломан

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

Спасибо за чтение, я надеюсь, что кто-то сможет объяснить мне, как этого можно достичь, я смог добавить внешний вид визуального изображения, которое я отправил, с помощью одной вкладки, но как только я добавил переключение вкладки в миксе это просто не сработало.

0

javascript jquery jquery-ui tabs selectable

Источник

user4585999 18 мар '15 в 15:03

1 ответ

Решение

Другие вопросы по тегам javascript jquery jquery-ui tabs selectable

user2801559 18 мар '15 в 18:24 2015-03-18 18:24 · Accepted Answer · 2015-03-18 18:24

Пытаться

$(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/