Question

我目前正在使用＆＃34; Easy Responsive Tabs插件作者：Samson.Onna＆＃34 ;; https://github.com/samsono/Easy-Responsive-Tabs-to-Accordion/blob/master/js/easyResponsiveTabs.js

默认情况下，脚本会为每个标签分配一个ID，当单击该标签时，该标签又会附加到网址上，这也可以在网址（http://mysite.co.uk/#horizontalTab3）中引用，例如这将显示标签3。

我想调整一下，使用我的标签自定义ID而不是默认的哈希网址。（/＃horizontalTab1）

这是下面的脚本。它没有修改，我可以说是需要修改的部分......

// Show correct content area
var tabNum = 0;
if(hash!='') {
var matches = hash.match(new RegExp(respTabsId+"([0-9]+)"));
if (matches!==null && matches.length===2) {
    tabNum = parseInt(matches[1],10)-1;
    if (tabNum > count) {
        tabNum = 0;
    }
}
}

以下操作＆＃34;点击了标签＆＃34;要保存的哈希并用作URL中的哈希...

我所做的是略微修改原始脚本，现在它使用了我给每个标签的ID。
因此每个标签的网址更加谷歌友好，看起来像这样（ http://mysite.co.uk/#tab-id）。 原始剧本仍然是他们的，只是注释掉了。

//Update Browser History
if(historyApi) {
    var currentHash = window.location.hash;

    //var newHash = respTabsId+(parseInt($tabAria.substring(9),10)+1).toString();
    var newHash = $respTabs.find('ul.tabs-list li.tab-active').attr('id');

    if (currentHash!="") {

    //var re = new RegExp(respTabsId+"[0-9]+");
        var re = $respTabs.find('ul.tabs-list li.tab-active').attr('id');

        if (currentHash.match(re)!=null) {                                  
            newHash = currentHash.replace(re,newHash);
        }
        else {
        //newHash = currentHash+"|"+newHash;
            newHash = '#'+newHash;
        }
    }
    else {
        newHash = '#'+newHash;
    }

    history.replaceState(null,null,newHash);
}
});

然后在我的HTML中我有了这个

    <ul class="tabs-list">
        <li id="choose-your-package">CHOOSE YOUR PACKAGE <div class="active-arrow"></div></li>
        <li id="chi-tour" class="demo-tab">CHI TOUR <div class="active-arrow"></div></li>
        <li id="extras-and-addons">EXTRAS + ADDONS <div class="active-arrow"></div></li>
        <li id="tech-specs">TECH SPECS <div class="active-arrow"></div></li>
    </ul><!-- /.tabs-list -->
    <div class="tabs-container">

        <div> <!-- Tab #1 -->
            <?php include('_product-tabs--package.php'); ?>
        </div><!-- / Tab #1 -->


        <div> <!-- Tab #2 -->
            <?php include('_product-tabs--demo.php'); ?>                
        </div> <!-- / Tab #2 -->


        <div> <!-- Tab #3 -->
            <?php include('_product-tabs--extras.php'); ?>                      
        </div> <!-- / Tab #3 -->


        <div> <!-- Tab #4 -->
            <?php include('_product-tabs--tech-specs.php'); ?>                      
        </div> <!-- / Tab #4 -->

    </div><!-- /.tabs-container -->

感谢提前！

Answer 1

修正了此问题，其他有此问题的人将此添加到responsiveTabs.js的底部。

// if the URL contains a hashtag, trigger click on that tab.
if (window.location.hash !== '') {
    var hasHash = window.location.hash;
    $('#product-tabs').find(hasHash).click();
}

$('.tabs-list li').on('click', function(e){
    var theid = $(this).attr('id');
    $(theid).click();
});

我添加了https://github.com/aaronsummers/EasyResponsiveTabs-CustomTweaks

这个修补程序创建了一个Git Repo

简易响应标签到手风琴，在向网址添加自定义标签ID时显示正确的标签

1 个答案: