如何在url和active相同的标签中显示jquery tab id?

时间:2017-12-19 05:45:56

标签: php jquery

我想在网址中添加标签ID,并且还想激活网址中当前标签的哪个标签ID。

如果我从其他系统点击带有标签ID的网址,则相同的标签将处于活动状态。

我添加了我的代码:

<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>

1 个答案:

答案 0 :(得分:0)

它非常简单,您可以使用pushstate自行处理(更新您的URL),或者您可以使用this library使它成为一块蛋糕:)