Использование вкладок Foundation Zurb в качестве WordPress Nav (активная вкладка)

Это вопрос, который больше ориентирован на тех из вас, у кого есть опыт работы с популярной SASS / JS Framework, Foundation by Zurb. Я пытаюсь использовать его в качестве своего структурного ядра для моей новой темы WordPress и задал вопрос …

Встраиваемые в Фонд стили для кнопок, форм и, конечно же, знаменитой сетки с 12 колонками. Однако он также включает вкладки jQuery, которые можно использовать для отображения содержимого с вкладками! Ну, я хотел использовать их для отображения навигации по моей теме и не знаю, с чего начать.

В настоящее время у меня есть следующее:

<nav class="row" role="navigation"> <dl class="tabs"> <dd class="active"> <a href="#home">Home</a> </dd> <dd class> <a href="#about">About</a> </dd> <dd class> <a href="#contact">Contact</a> </dd> </dl> <ul class="tabs-content"> <li id="homeTab">Home Page?</li> <li id="aboutTab" style="display: none;">About Page?</li> <li id="contactTab" style="display: none;">Contact Page?</li> </ul> </nav> 

Опять же, я только начинаю с основы Foundation, и, насколько я могу судить, это правильно, чтобы отображать фактические вкладки … однако, это только для чистого контента на вкладке – НЕ ссылка на новую часть сайта который покажет активную вкладку для этого раздела.

Как я могу использовать эту логику вкладки Foundation и объединить ее с WordPress, поэтому, когда пользователь нажимает на нее, она загружает эту часть сайта и отображает правильную «активную» вкладку на страницу.

Примеры:

  • Пользователь нажимает «Новости»> «Статья» и находится на single.php. Вкладка «Новости» должна оставаться «активной» в разделе «Новости» на сайте.
  • Пользователь нажимает «Контакт», который загружает страницу WordPress, содержащую контактную форму. Активна вкладка «Контакт».
  • и т.д

Любая помощь будет очень признательна. Если вы не знаете, что такое Foundation Framework, нажмите здесь, чтобы попасть в центр документации и раздел «Вкладки». Я честно потерялся, и это, вероятно, передо мной … подумал, что я открою конверсию, чтобы увидеть, видит ли кто-нибудь это. лол

Спасибо всем!

Solutions Collecting From Web of "Использование вкладок Foundation Zurb в качестве WordPress Nav (активная вкладка)"

На вкладках Foundation предполагается, что отображаемый контент уже существует в элементах <li> . Вы можете согласиться с этим предположением и просто предварительно загрузить весь свой сайт вверх, но это, вероятно, вызовет больше проблем, чем исправляет. Если ничего другого, нагрузка будет навсегда.

Один из вариантов (страница, на которую вы ссылались, ссылается на это) использует стиль вкладок и загружает остальную часть страницы, как обычно, с помощью WordPress & Php. Это означает, что вы сохраняете эту часть:

 <nav class="row" role="navigation"> <dl class="tabs"> <dd class="active"> <a href="<?php echo get_bloginfo('url'); ?>/home/">Home</a> </dd> <dd> <a href="<?php echo get_bloginfo('url'); ?>/about/">About</a> </dd> <dd> <a href="<?php echo get_bloginfo('url'); ?>/contact/">Contact</a> </dd> </dl> </nav> 

… но вам не нужен <ul> . Измените значения href для ссылки на страницу, которую вы хотите отобразить.

У этой проблемы есть проблема, что каждая страница будет загружаться с вкладкой «Главная», помеченной как активная, поэтому вы можете превратить ее в петлю php и проверить, на какой странице вы находитесь:

 <nav class="row" role="navigation"> <dl class="tabs"> <?php // listing out all the pages we want in the navigation with // their slugs & titles $pages = array( "home" => "Home", "about" => "About", "contact" => "Contact" ); // finding out what page we're on by slug global $post; $post_slug = $post->post_name; // looping through the pages to create each tab foreach ( $pages as $slug => $title ) { // find out if we're on this page and set up the active class $active = ( $slug == $post_slug ) ? "class='active'" : ""; // echo each dd item with a link to the page echo "<dd ".$active."> <a href='". get_bloginfo('url') ."/".$slug."/'>".$title."</a> </dd>"; } ?> </dl> </nav> 

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