如何在URL和Active同一选项卡中显示jQuery选项卡ID

Question

我想将选项卡ID添加到URL，也想激活URL中的当前选项卡ID。

如果我用另一个系统的选项卡ID击中URL，则相同的选项卡将处于活动状态。

我添加了我的代码：

<div id="faq-accordion">
        <ul class="tabs">
            <li class="tab-link current" data-tab="tab-1"><a href="#tab-2">About us</li>
            <li class="tab-link" data-tab="tab-2"><a href="#tab-2">Ordering</li>
            <li class="tab-link" data-tab="tab-3"><a href="#tab-2">Payment</li>
        </ul>
        <div id="tab-1" class="tab-content current">
            <div class="accordion-block close">
                <div class="accordion-trigger close">
                    <span>Can order be placed on phone?</span>
                </div>
                <div class="accordion-content">
                    <ul>
                        <li>Yes, we do take orders on the phone</li>
                        <li>We also take orders via Whatsapp. </li>
                    </ul>
                  </div>                
            </div>
        </div>
        <div id="tab-2" class="tab-content">
            <div class="accordion-block close">
                <div class="accordion-trigger close">
                    <span>Only Part of my order has arrived. Why?</span>
                </div>
                <div class="accordion-content">
                    <p>In rare occasions, few of the ordered products are unavailable. In such situations, we try to deliver the orders in parts. In such situations, you will be duly informed by our customer service executive.</p>
                  </div>                
            </div>
        </div>
        </div>

<script>
    jQuery(document).ready(function(){
        jQuery('ul.tabs li').click(function(){
            var tab_id = jQuery(this).attr('data-tab');
            jQuery('ul.tabs li').removeClass('current');
            jQuery('.tab-content').removeClass('current');
            jQuery(this).addClass('current');
            jQuery("#"+tab_id).addClass('current');
        });
    });
</script>

Answer 1

它是如此简单，您可以使用PushState（更新URL）自己处理它，也可以使用此库，这已经使它成为了蛋糕：）