Примечание: У меня есть только несколько дней опыта работы с jQuery, хотя я искал вокруг, чтобы попытаться исправить проблему и протестировать ее, но она просто не работает.jQueryUI Stackable (Удалить содержимое на разных вкладках нажмите)
То, что я пытаюсь достичь:
У меня возникли некоторые проблемы с jQueryUI в .selectable, я создал Выбирается с четырьмя вкладками, каждая вкладка отображает разное содержание добавил к нему (а класс для изображения, добавление кнопки и добавление текста абзаца).
Вот визуальный взгляд на то, что я пытаюсь достичь: http://puu.sh/gELQi/211165f55a.png
- Мой текущий JQuery = http://jsfiddle.net/p5gsby49/8/
Моя проблема
В настоящее время, при нажатии на одной вкладке он будет корректно отображать содержимое этой вкладки, однако, как только вы нажмете на другой/той же вкладке снова он:
Добавить содержимое перекрывающихся предыдущий вкладка
- Кнопка добавляется на каждом новом щелчку же или другой вкладке добавлен
- Новый класс изображения и нажат ниже предыдущей вкладке
- Пункт тэ х перекрывается
Что мне нужно
Мне нужен способ, так что на каждый вкладке нажмите (тот же или другой вкладке) будет очистить все предыдущее содержимое последняя вкладка (любые классы кнопок/абзацев/изображений).
Кроме того, еще одна проблема с 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;
}
}
Спасибо за чтение, я надеюсь, что кто-то может быть в состоянии просветить меня о том, как это может быть достигнуто, я был в состоянии добавить внешний вид и визуальное изображение, которое я послал с одним , но как только я добавила переключение вкладок в микс, это просто не сработало.
Вы присоединяя кнопку MORE снова и снова. Вам нужно, чтобы он был создан только один раз, или он отлично работает прямо сейчас? –
@Joker Я хочу, чтобы кнопка была применена только один раз на каждой вкладке, это не только кнопка, но и классы текста и изображения добавляются снова и снова, кнопка выглядит более доминирующей, но они делают то же самое. Каждый раз, когда нажимается табуляция (такая же или другая), я хочу, чтобы она очистила содержимое предыдущей вкладки и применила новую информацию. –