Vinnica
@Vinnica
Начинающий верстальщик

Как дописать js чтобы открывались collapse и tab по url?

Добрый день. У меня проблема следующего характера. Мне вручили страницы шаблона на Вордпресе. Там есть шаблон который отвечает за страницу faq. Написана она на php и подключением jquery функциями
вот Весь код этой страницы :
<div class="tab-faq post_item text-content" id="twitter-bootstrap-tabs">
                        <?php $n = 0;
                        $faqs = get_terms(array("taxonomy" => 'faq_category', "hide_empty" => true, "orderby" => 'slug')); ?>

                        <ul class="col-sm-3 nav nav-tabs" role="tablist">
                            <?php foreach ($faqs as $key => $faq) : ?>
                                <?php $faq_name = $faq->name; ?>
                                <?php $faq_slug = $faq->slug; ?>
                                <?php $faq_ID = $faq->term_id; ?>
                                <?php $faq_tax = $faq->taxonomy; ?>
                                <?php $nn = ++$n ?>
                                <li role="presentation">
                                    <a href="#tab-<?php echo $faq_slug ?>" aria-controls="tab-<?php echo $faq_slug ?>"
                                       role="tab" data-toggle="tab">
                                        <?php if (get_field('icon', $faq_tax . '_' . $faq_ID)): ?>
                                            <img src="<?php the_field('icon', $faq_tax . '_' . $faq_ID); ?>"
                                                 alt="<?php echo $faq_name ?>">
                                        <?php endif; ?>
                                        <?php echo $faq_name ?>
                                    </a>
                                </li>
                            <?php endforeach; ?>
                        </ul>
                        <div class="tab-content col-sm-9">
                            <div class="panel-group collapse-faq" id="accordion_faq" role="tablist"
                                 aria-multiselectable="true">
                                <?php foreach ($faqs as $key => $faq) : ?>
                                    <?php $faq_slug = $faq->slug; ?>
                                    <div role="tabpanel" class="tab-pane" id="tab-<?php echo $faq_slug ?>">
                                        <?php $args = array(
                                            'post_type' => 'faq',
                                            'showposts' => 100,
                                            "orderby" => 'date',
                                            "order" => 'asc',
                                            'tax_query' => array(
                                                array(
                                                    'taxonomy' => 'faq_category',
                                                    'terms' => $faq_slug,
                                                    'field' => 'slug'
                                                )
                                            )); ?>
                                        <?php $wp_query = new WP_Query($args);
                                        $cont = 0; ?>
                                        <?php while ($wp_query->have_posts()) : $wp_query->the_post();
                                            $cont++ ?>
                                            <div class="panel panel-default">
                                                <div class="panel-heading panel-head-faq" role="tab"
                                                     id="heading-<?php echo $faq_slug ?>-<?php echo $cont ?>">
                                                    <h4 class="panel-title">
                                                        <a role="button" class="collapsed"
                                                           data-toggle="collapse"
                                                           data-parent="#accordion_faq"
                                                           href="#collapse-<?php echo $faq_slug ?>-<?php echo $cont ?>"
                                                           aria-expanded="true"
                                                           aria-controls="#tab-<?php echo $faq_slug ?>#collapse-<?php echo $faq_slug ?>-<?php echo $cont ?>">
                                                            <?php the_title(); ?>
                                                        </a>
                                                    </h4>
                                                </div>
                                            </div>
                                            <div id="collapse-<?php echo $faq_slug ?>-<?php echo $cont ?>"
                                                 class="panel-collapse collapse" role="tabpanel"
                                                 aria-labelledby="heading-<?php echo $faq_slug ?>-<?php echo $cont ?>">
                                                <div class="panel-body">
                                                    <?php the_content(); ?>
                                                </div>
                                            </div>
                                            <!-- end section -->
                                        <?endwhile;
                                        wp_reset_query(); ?>

                                    </div>
                                <?php endforeach; ?>

                            </div>
                        </div>
                    </div>


также есть jquery, идет подключения библиотеки jquery.easytabs.min.js , вот таким образом

$('#twitter-bootstrap-tabs').easytabs();

И задачу мне поставили чтобы с помощью урл открывать и необходимый таб, и необходимый коллапс.

я с помощью страницы бутстрапа соорудил вот такой код

$(document).ready(function() {
    var anchor = window.location.hash.replace("#", "");
    $(".collapse").collapse('hide');
    $("#" + anchor).collapse('show');
    console.log('anchor=',anchor);

});


но он не поможет при вот таком запросе - например - #tab-08-service#collapse-08-service-01

также, при таком запросе не открывается и нужный таб, не говоря уже о коллапсе.

Кто знает как мне выйти из этой ситуации. буду очень благодарен
  • Вопрос задан
  • 359 просмотров
Пригласить эксперта
Ответы на вопрос 1
dpigo
@dpigo
Front-end developer
При таких составных слагах придется их парсить и вручную сворачивать/переключать контроллы не надеясь на плагины.

Разбивайте строку на сегменты и дальше с массивом сегментов работайте.

var slug = window.location.hash;
var segments = slug.split('#').slice(1);

Сложность парсера зависить от наличия конвенции по формированию слага. Если элементов не больше определенного количества и их порядок не меняется - то все очень просто, если нет - придется добавить блок определения сегмента по каким-либо признакам.

https://jsfiddle.net/m2gyypma/
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы