Я использую пользовательский интерфейс jQuery для отображения информации на рабочих столах на вкладках и в течение некоторого времени. Я добавил Responsive Tabs to Accordion, чтобы показать ту же информацию на вкладках аккордеона для планшетов и смартфонов, так как я делаю сайт отзывчивым. Информация теперь отображается в формате аккордеона со всеми, но первая вкладка открытаjQuery Аккордеонные вкладки Не открываются с использованием Resonsive Tabs для Accordion
, но клавиши со стрелками не вызвать display: block;
вместо display: none;
. Был у него довольно долгое время и потерялся.
Вот код загрузки информации в закладках, и мы надеемся в ближайшее время для планшета и смартфонов в формате аккордеона:
<div class="demo tabs">
<div id="tabs11" class="tabsaccordion">
<ul class="resp-tabs-list">
<li id="tab-title-overview"><a href="#tabs-1">OVERVIEW</a></li>
<li id="tab-title-accomodation"><a href="#tabs-2">ACCOMODATION</a></li>
<li id="tab-title-facilities"><a href="#tabs-3"><?php if(in_category('liveaboards')) echo "SHIP FACILITIES"; else echo "RESORT FACILITIES";?></a></li>
<li id="tab-title-diving"><a href="#tabs-4">DIVING</a></li>
<li id="tab-title-surfing"><a href="#tabs-5">SURFING</a></li>
<li id="tab-title-activities"><a href="#tabs-6">ACTIVITIES</a></li>
<li id="tab-title-special"><a href="#tabs-7">SPECIAL</a></li>
</ul>
<div class="resp-tabs-container hor_1">
<div id="tabs-1"><?php the_content(); //echo get_post_meta(get_the_ID(), "overview_value", true); ?></div>
<div id="tabs-2"><?php echo get_post_meta(get_the_ID(), "Accomodation", true); ?></div>
<div id="tabs-3"><?php echo get_post_meta(get_the_ID(), "Resort Facilities", true); ?></div>
<div id="tabs-4"><?php echo get_post_meta(get_the_ID(), "Diving", true); ?></div>
<div id="tabs-5"><?php echo get_post_meta(get_the_ID(), "Surfing", true); ?></div>
<div id="tabs-6"><?php echo get_post_meta(get_the_ID(), "Activities", true); ?></div>
<div id="tabs-7"><?php echo get_post_meta(get_the_ID(), "Special", true); ?></div>
</div>
</div>
</div><!-- End demo -->
Загрузочный скрипт запускается с помощью
<script type="text/javascript">
jQuery(document).ready(function() {
//Horizontal Tab
jQuery('#tabs11').easyResponsiveTabs({
type: 'default', //Types: default, vertical, accordion
width: 'auto', //auto or any width like 600px
fit: true, // 100% fit in a container
tabidentify: 'hor_1', // The tab groups identifier
activate: function(event) { // Callback function if tab is switched
var $tab = jQuery(this);
var $info = jQuery('#nested-tabInfo');
var $name = jQuery('span', $info);
$name.text($tab.text());
$info.show();
}
});
});
</script>
В JavaScript включен хорошо и так же, как и на Github, только css для вкладок несколько изменился и отображается here. Я запускаю его локально на Vagrant, поэтому не могу показать его онлайн atm. Живой сайт с вкладками пользовательского интерфейса jQuery и без аккордеона или отзывчивого дисплея - here. Никаких ошибок в консоли, чтобы действительно помочь, так что надеюсь, что кто-то здесь может сказать мне, что мне не хватает, или как я могу отладить это.
инициализации Кажется, что класс 'соответственно вкладками-контент-active' не добавляется к DIC содержимому, когда я вызвать щелкнув стрелку в поле H2. И файл Js из репо, чтобы вызвать его, имеет эту строку на '$ ($ respTabs.find ('. Resp-tab-content.' + Options.tabidentify) [tabNum]). AddClass ('resp-tab-content -active '). addClass (options.tabidentify) .attr (' style ',' display: block '); 'что я считаю важным – rhand
Было интересно, могу ли я просто отключить jQuery UI для этого div, чтобы вкладки в Accordion магия работает, но пользовательский интерфейс jQuery не делает этого и для видовых экранов 1000px. Но я открыт для других вкладок jquery ui для решений аккордеона ... – rhand