Здравствуйте. Я пытаюсь сделать следующее: у меня есть панель вкладок с 6 вкладками. Внутри каждой вкладки я хочу разместить гармошку и / или слайдер. Проблема в том, что я могу заставить себя вести 1х вкладку, где есть слайдер или аккордеон, и они работают нормально. Когда я настраиваю следующую вкладку, вкладка не будет загружать аккордеон или слайдер и, или если он не работает, аккордеон или слайдер выходит из строя или отражает первый слайдер или аккордеон.
Я уверен, что это создание разных идентификаторов для каждого Аккордеон и Слайдер ведут себя независимо в каждой вкладке. Я не понимаю, как это сделать, что я делаю неправильно.
Я знал об этой области знаний, поэтому не уверен, что писать в терминах кода и т. Д. c.
Итак, я поместил html:
Есть файл jQuery:
CSS Я не думал, что повлияет на результат пропавшего ID для Аккордеона
Надеюсь, это правильно.
(функция ($, окно, документ, не определено) {'использовать строгий';
// init cubeportfolio
$('#js-grid-faq').cubeportfolio({
filters: '#js-filters-faq',
defaultFilter: '*',
animationType: 'sequentially',
gridAdjustment: 'default',
displayType: 'default',
caption: 'expand',
gapHorizontal: 0,
gapVertical: 0
});
}) (jQuery, окно, документ);
<section class="main-contain dip-style bg-gray">
<div class="container">
<div class="login-area mb30">
<div class="login-header">
<div class="login-details">
<ul class="nav nav-tabs navbar-right">
<li class="active"><a data-toggle="tab" href="#description">Description</a></li>
<li><a data-toggle="tab" href="#size">Size</a></li>
<li><a data-toggle="tab" href="#test-1">Test-1</a></li>
<li><a data-toggle="tab" href="#test-2">Test-2</a></li>
<li><a data-toggle="tab" href="#test-3">Test-3</a></li>
<li><a data-toggle="tab" href="#test-4">Test-4</a></li>
</ul>
</div>
</div>
<div class="tab-content">
<!-- Description -->
<div class="tab-pane fade in active" id="description">
<p> <!-- ACCORDIAN START --> <!-- ACCORDIAN START --> <!-- ACCORDIAN START --> <!-- ACCORDIAN START --> <!-- ACCORDIAN START -->
<section class="main-contain bg-gray">
<div class="container">
<div id="js-filters-faq" class="cbp-l-filters-underline">
<div data-filter="*" class="cbp-filter-item-active cbp-filter-item">
All
</div>
<div data-filter=".buying" class="cbp-filter-item">
Buying
</div>
<div data-filter=".author" class="cbp-filter-item">
Author
</div>
<div data-filter=".account" class="cbp-filter-item">
Account
</div>
<div data-filter=".copyright" class="cbp-filter-item">
Copyright
</div>
<div data-filter=".community" class="cbp-filter-item">
Community
</div>
</div>
<div id="js-grid-faq" class="cbp cbp-l-grid-faq">
<div class="cbp-item buying">
<div class="cbp-caption">
<div class="cbp-caption-defaultWrap">
Where can I find my Purchase Code?
</div>
<div class="cbp-caption-activeWrap">
<div class="cbp-l-caption-body">
Every item purchased on Envato Market has a unique code, called a purchase code.
<br>
A purchase code is used by authors to verify you have purchased a licence for the item. The purchase code may be required to access an author’s support site (if support is offered) or to enable automatic updates.
</div>
</div>
</div>
</div>
<div class="cbp-item community">
<div class="cbp-caption">
<div class="cbp-caption-defaultWrap">
Forum Comments by Envato Staff & Moderators
</div>
<div class="cbp-caption-activeWrap">
<div class="cbp-l-caption-body">
Envato is extremely fortunate to have a huge community with highly engaged users. Part of our community’s time on Envato Market is spent within our forums, our common grounds for communication. In order to clarify the different roles and responsibilities of the various people and roles that post in our forums we hope you find the following information useful.
</div>
</div>
</div>
</div>
<div class="cbp-item community">
<div class="cbp-caption">
<div class="cbp-caption-defaultWrap">
Forum and Community Rules
</div>
<div class="cbp-caption-activeWrap">
<div class="cbp-l-caption-body">
Envato takes great pride in it’s global and thriving community! They're part of what makes the Envato Market sites fun and friendly. The forum rules and guidelines focus on mutual respect.
<br>
All users who wish to participate or give feedback are invited to do so.
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- End Description -->
<section class="main-contain bg-gray">
<div class="container">
<div id="js-filters-faq" class="cbp-l-filters-underline">
<div data-filter="*" class="cbp-filter-item-active cbp-filter-item">
All
</div>
<div data-filter=".buying" class="cbp-filter-item">
Buying
</div>
<div data-filter=".author" class="cbp-filter-item">
Author
</div>
<div data-filter=".account" class="cbp-filter-item">
Account
</div>
<div data-filter=".copyright" class="cbp-filter-item">
Copyright
</div>
<div data-filter=".community" class="cbp-filter-item">
Community
</div>
</div>
<div id="js-grid-faq" class="cbp cbp-l-grid-faq">
<div class="cbp-item buying">
<div class="cbp-caption">
<div class="cbp-caption-defaultWrap">
Where can I find my Purchase Code?
</div>
<div class="cbp-caption-activeWrap">
<div class="cbp-l-caption-body">
Every item purchased on Envato Market has a unique code, called a purchase code.
<br>
A purchase code is used by authors to verify you have purchased a licence for the item. The purchase code may be required to access an author’s support site (if support is offered) or to enable automatic updates.
</div>
</div>
</div>
</div>
<div class="cbp-item community">
<div class="cbp-caption">
<div class="cbp-caption-defaultWrap">
Forum Comments by Envato Staff & Moderators
</div>
<div class="cbp-caption-activeWrap">
<div class="cbp-l-caption-body">
Envato is extremely fortunate to have a huge community with highly engaged users. Part of our community’s time on Envato Market is spent within our forums, our common grounds for communication. In order to clarify the different roles and responsibilities of the various people and roles that post in our forums we hope you find the following information useful.
</div>
</div>
</div>
</div>
<div class="cbp-item community">
<div class="cbp-caption">
<div class="cbp-caption-defaultWrap">
Forum and Community Rules
</div>
<div class="cbp-caption-activeWrap">
<div class="cbp-l-caption-body">
Envato takes great pride in it’s global and thriving community! They're part of what makes the Envato Market sites fun and friendly. The forum rules and guidelines focus on mutual respect.
<br>
All users who wish to participate or give feedback are invited to do so.
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Description -->
<div class="tab-pane media-block" id="test-1">
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="video-block">
<iframe width="540" height="360" src="https://www.youtube.com/embed/Vpg9yizPP_g" frameborder="0"></iframe>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="video-block">
<iframe width="540" height="360" src="https://www.youtube.com/embed/Vpg9yizPP_g" frameborder="0"></iframe>
</div>
</div>
</div>
<!-- End Description -->
</div>
<!-- Size -->
<div id="size" class="tab-pane">
16" waist
<br>
34" inseam
<br>
10.5" front rise
<br>
8.5" knee
<br>
7.5" leg opening
<br>
<br>
Measurements taken from size 30
<br>
Model wears size 31. Model is 6'2
</div>
<!-- Size -->
<!-- Description -->
<div class="tab-pane media-block" id="test-2">
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="col-md-6">
<img src="img/imac2.png" alt="" width="570" height="500" class="img-responsive">
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="col-md-6">
<img src="img/team1.jpg" alt="" width="263" height="263" class="img-responsive">
</div>
</div>
</div>
<!-- End Description -->
</div>
<!-- Description -->
<div class="tab-pane media-block" id="test-3">
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="col-md-6">
<img src="img/imac2.png" alt="" width="570" height="500" class="img-responsive">
</div>
<div class="col-md-6">
<img src="img/imac2.png" alt="" width="570" height="500" class="img-responsive">
</div>
</div>
</div>
<!-- End Description -->
</div>
</div>
</div>
</div>
</section>