在移动设备上我有一点UI问题，如果你打开“FÜLLUNG”标签内容很长，然后向下滚动并打开“Msse”但我想要的是在页面上保持位置而另一个选项卡关闭，然后滚动到新打开的选项卡，因为当前主网站上的所有内容都不在视图中，您最终会在网站底部，然后滚动回新选项卡。
如果你有手机，你可以在这里看到它：
https://www.ambientlounge.eu/collections/butterfly-sofa-1/products/butterfly-hot-chocolate
$(document).ready(function() {
var originalTabs = $('.originalTabs').html();
var windowWidth = 0;
var swapSpeed = 300;
var scrollSpeed = 200;
function clearTabs() {
$('.originalTabs').html(originalTabs);
}
//clearTabs();
//desktopTabs();
function desktopTabs() {
clearTabs();
// cretate tabs for desktop
var headers = $("#tab_description h6");
$('#tab_description h6').each(function(i) {
$(this).nextUntil("h6").andSelf().wrapAll('<div class="tab" id="tab-' + i + '"/>');
});
for (var i = 0; i < headers.length; i++) {
$('.tabs').append('<li class=""><a href="#tab-' + i + '">' + headers[i].innerHTML + '</a></li>');
}
$('ul.tabs').each(function() {
var active, content, links = $(this).find('a');
var listitem = $(this).find('li');
active = listitem.first().addClass('active');
content = $(active.attr('href'));
$('.tab').hide();
$(this).find('a').click(function(e) {
$('.tab').hide();
$('ul.tabs li').removeClass('active');
content.hide();
active = $(this);
content = $($(this).attr('href'));
active.parent().addClass('active');
content.show();
return false;
});
});
headers.remove(); // remove headers from description
$('#tab-0').show(); // show the first tab
}
function mobileTabs() {
clearTabs();
//alert("loaded mobile");
var headers = $("#tab_description h6");
$(headers).each(function(i) {
$(this).append('<a href="#accordion_' + (i + 1) + '" id="accordion_' + (i + 1) + '"></a>');
//$(this).nextUntil("h6").andSelf().wrapAll('<div class="aTab" id="tab-'+i+'"/>');
$(this).on('click tap', function() {
tabClick($(this));
});
});
$('#tab_description h6').first().addClass("active");
$('#tab_description h6').first().nextUntil("h6").show();
}
var tabClick = function(x) {
//alert("clicked");
var accordionContent = $('#tab_description p, #tab_description ul, #tab_description table, #tab_description div');
//$('#tab_description h6').removeClass("active");
if (!$(x).hasClass("active")) {
$(x).addClass("active");
$('#tab_description h6').removeClass("active");
$(accordionContent).slideUp(swapSpeed);
$(x).addClass("active");
$(x).nextUntil('h6').slideDown(swapSpeed).promise().then(function() {
scrollToTab($(x));
});
} else {
if ($(x).next("p").css('display') == 'none') {
$(x).nextUntil('h6').slideDown(swapSpeed).promise().then(function() {
scrollToTab($(x));
});
} else {
$(accordionContent).slideUp(swapSpeed);
}
}
return false;
}
function scrollToTab(x) {
$("html, body").animate({
scrollTop: $(x).offset().top - 10
}, scrollSpeed);
}
//load default
$(window).on("load", function() {
mobileTabs();
});
//bind to resize
$(window).on("orientationchange resize", function() {
if (windowWidth != $(window).width()) {
mobileTabs();
$('#tab_description h6').on("click tap", tabClick);
windowWidth = $(window).width();
delete windowWidth;
}
});
});#tab_description p,
#tab_description ul,
[hidden],
template {
display: none
}
#tab_description ul {
list-style-type: circle!important;
padding-left: 20px
}
.tab {
line-height: 23px;
font-size: 14px;
margin-top: 20px
}
@media only screen and (max-width:41.6875em) and (orientation:portrait) {
#tab_description h6 {
cursor: pointer;
margin: 0 0 8px;
font-size: 1.1em;
padding: 10px;
background: #999;
color: #fff;
text-transform: capitalize;
display: block
}
#tab_description h6.active {
background: #333
}
#tab_description h6 span {
line-height: 0!important
}
#tab_description div,
#tab_description p,
#tab_description table,
#tab_description ul {
display: none;
margin: 0;
padding: .5em .5em 1em;
font-size: .9em
}
#tab_description div:first-child,
#tab_description p:first-child,
#tab_description table:first-child,
#tab_description ul:first-child {
display: block
}
#tab_description iframe {
width: 100%
}
#tab_description ul {
margin-left: 20px
}
}
@media only screen and (max-width:41.6875em) and (orientation:landscape) {
#tab_description h6 {
cursor: pointer;
margin: 0 0 8px;
font-size: 1.1em;
padding: 10px;
background: #999;
color: #fff;
text-transform: capitalize
}
#tab_description h6.active {
background: #333
}
#tab_description h6 span {
line-height: 0!important
}
#tab_description div,
#tab_description p,
#tab_description table,
#tab_description ul {
margin: 0;
padding: 1em 0;
font-size: .9em
}
#tab_description iframe {
width: 100%
}
#tab_description ul {
margin-left: 20px
}
}
input,
select {
background: #fff
}
#tab_description .play-button,
#tab_description .video-container,
#tab_description .video-player,
#tab_description div p {
display: block!important
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="originalTabs">
<ul class="tabs">
<!--holder for h6 tabs -->
</ul>
<div id="tab_description">
<h6>Beschreibung</h6>
<p><span>Lass die Seele baumeln während du in dem super gemütlichen ACOUSTIC Sitzsack entspannst. Im Gegensatz zu gewöhnlichen Sitzsäcken hat dieses Exemplar einiges mehr zu bieten. Zwei Füllbereiche erlauben es dir, das Sofa nach Belieben zu füllen. Wir empfehlen eine fest gefüllte Rückseite und einen etwas lockereren Bodenteil. Elastische Bänder im Inneren des Möbels sorgen für eine stabile Form und unterstützen deinen Körper an wichtigen Punkten. Setz dich hin und du willst du so schnell nicht mehr aufstehen. Das elegante Lila ist zudem ein toller optischer Akzent in deinem Wohnzimmer. Kombiniere den Designer-Sitzsack mit unserem Beistelltisch oder unseren Fußkissen und dekoriere dein Zuhause.</span></p>
<h6><span>Stoff</span></h6>
<p><span>Gepolstert im Inneren und super weich auf der Oberfläche – der Stoff ist so bequem wie die Farbe stylisch ist. Das Möbelstück lässt sich mit einer Vielzahl an Farben und Materialien in der Inneneinrichtung kombinieren.</span></p>
<p><strong>40％ Viskose, 60% Polyester, 560 g/m (TC backing)</strong></p>
<h6><span>Ausstattung</span></h6>
<ul>
<li class="ty-product-feature__multiple-item">2 x YKK Reißverschlüsse (sicherheitsverriegelnd & kindergesichert)</li>
<li class="ty-product-feature__multiple-item">Zwei separate Füllbereiche, perfekt für das <em>Funnelweb™</em> Füllsystem</li>
<li class="ty-product-feature__multiple-item">Extra breite Sitzfläche</li>
<li class="ty-product-feature__multiple-item">Kompatibel mit dem <em>Funnelweb™</em> System</li>
<li class="ty-product-feature__multiple-item">Gepolstert</li>
<li class="ty-product-feature__multiple-item"><em>Ambi-Spring</em>-System aus elastischen Bändern im Inneren des Sitzsacks</li>
<li class="ty-product-feature__multiple-item">Ein passendes OTTOMAN™ Fußkissen ist separat erhältlich</li>
<li class="ty-product-feature__multiple-item">Ein passender VERSA TABLE™ Beistelltisch ist separat erhältlich</li>
</ul>
<h6><span style="line-height: 1.4;">Füllung</span></h6>
<p style="text-align: center;"><strong><span>Sieh dir an, wie das <em>Funnelweb</em>™ Zip & Tip System funktioniert.</span></strong></p>
<p style="text-align: center;"><iframe width="560" height="315" src="https://www.youtube.com/embed/3O37-eLpJQY" frameborder="0" allowfullscreen=""></iframe></p>
<p><strong>Um das ACOUSTIC Sofa zu füllen,</strong> empfehlen wir ca. 300lt unserer <em>PremierBead</em>™ Füllung. Die individuell optimale Füllmenge hängt aber auch von Deinem persönlichem Komfortempfinden ab. Grundlegend kann man sagen: Füll' die Rückseite
eher üppig, damit das Sofa nachher stabil am Boden steht. Den Bodenteil kannst Du dann, nach Belieben, auch weniger fest füllen. Umso weniger Füllung, umso weicher die Sitzfläche.</p>
<p><span><strong>1. Schritt: </strong>Nimm' dir den Bezug und öffne die Rückseite. (mit Hilfe des mitgelieferten Reißverschluss-Öffners oder einer Büroklammer) Bring das <em>Funnelweb</em> an den Reißverschlüssen des Bezugs an. Wenn Bezug und Füllbeutel korrekt verbunden sind, hebe den Füllbeutel und lass die Kügelchen in den Bezug fallen. Währenddessen kannst du durch leichtes Bewegen und Schütteln der Komponenten etwas nachhelfen. Dadurch gelangen die Kügelchen durch die gesamte Struktur im Inneren. Wenn die Rückseite voll genug ist, entferne den Füllbeutel vorsichtig. Schieße den weißen Reißverschluss am Bezug und stecke ihn in den Bezug. Danach, schließe den Reißverschluss des Bezugs. Die Rückseite sollte nun fest und stabil sein.</span></p>
<p><span><strong>2. Schritt:</strong> Wiederhole die Prozedur aus Schritt 1 für den Bodenteil. Achte darauf, den Sitzteil nicht so fest wie die Rückseite zu füllen. (ca. 80%) Probier' zwischendurch, durch Fühlen und Sitzen, ob die Sitzfläche deinen Komfortansprüchen genügt.</span></p>
<h6><span>Pflege</span></h6>
<p>Unsere Indoor-Stoffe haben eine sehr hohe Qualität und sind darauf ausgelegt, lange zu bestehen. Es folgen einige unkomplizierte <strong>Pflegetipps</strong>, um die Langlebigkeit der Möbel zu fördern.</p>
<p>Sollten sich einzelne Fäden lösen, schneide sie ab. Nicht daran ziehen! Staub kann man am besten mit einem Staubsauger mit geeignetem Aufsatz entfernen. Benutze keine groben Bürsten und vermeide generell scharfe und spitze Objekte, beim Umgang mit
dem Stoff. Um ein Verblassen der Farbe zu vermeiden, ist es empfehlenswert, den Sessel nicht zu langem direktem Sonnenlicht auszusetzen. Aus Sicherheitsgründen sollte das Möbelstück mindestens 50cm von jeglichen Hitzequellen entfernt stehen. Innerhalb
der ersten 3-6 Monate werden die Kügelchen im Inneren natürlicherweise etwas zusammengedrückt, weshalb eine kleine Nachladung notwendig sein kann. Deshalb solltest du die übrig gebliebenen Kügelchen stets im Füllbeutel aufheben. Arm- und Rückenlehne
sind nicht zum darauf sitzen designt, weshalb man sich, auch wenn es manchmal schwerfällt, konventionell auf die Sitzfläche setzen sollte. Damit dein Beanbag immer gut aussieht, solltest du ihn nach Gebrauch etwas aufschütteln, damit er ein seine
ursprüngliche Gestallt zurückkehrt. </p>
<p><strong>Reinigung & Wäsche:</strong></p>
<p>Gute Nachricht: Alle unsere Indoor-Stoffe sind waschmaschinenfest und handwaschbar in kaltem und lauwarmen Wasser. Trocknen aber bitte nur an der Leine! "Gieße" die Kügelchen vor der Wäsche per <em>Funnelweb™</em>-System zurück in den Füllbeutel.
Kleine Flecken empfiehlt es sich stelltenweise per Hand, mit Hilfe eines professionellen Reinigungssets zu behandeln. Die Anwendung eines Pflegemittels, wie dem <em>3M Scotchgard,</em> ist auch niemals verkehrt.<br /><strong></strong></p>
<p><strong>Garantie und Reparaturen: </strong></p>
<p>Wie überall im Leben können auch hier hin und wieder Probleme auftreten. Wenn sich, bei angemessener Anwendung und innerhalb eines angemessenen Zeitraums, der Saum löst oder Risse auftreten, kontaktiere unser Team in Köln. Sende und eine E-Mail, am
besten mit Fotos des Schadens, an info@ambientlounge.eu oder rufe uns unter 015231085279 an. Die meisten kleinen Schäden sind erfahrungsgemäß schnell behoben. </p>
<p>Viel Spaß mit deinem Ambient Lounge®!</p>
<h6>Maße</h6>
<p style="text-align: left;"><img style="margin-right: auto; margin-left: auto; float: none; display: block;" alt="" src="//cdn.shopify.com/s/files/1/1174/5686/files/ambient-lounge-acoustic-dimensions_medium.jpg?17255928396919968517" /></p>
<p style="text-align: center;"><strong>W</strong>: 80cm | <b>B</b>: 80cm | <b>T</b>: 80cm | Gewicht (Bezug): 3.7kg</p>
<div id="spoon-plugin-kncgbdglledmjmpnikebkagnchfdehbm-2" style="display: none;"></div>
</div>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>