jQuery滚动到选项卡模块并使用锚链接打开选项卡

时间:2018-06-27 18:09:01

标签: javascript jquery wordpress tabs

我正在使用锚链接(在主菜单上)滚动到选项卡模块并打开正确的选项卡。

我有一些运行良好的代码,但是有一个问题。

如果选项卡中有一个锚链接,则代码将不再滚动到该选项卡(尽管它确实打开了)。

Test site here。前两个标签内部没有锚链接,并且可以正常工作。最后3个标签具有锚链接,并且已丢失其滚动。

任何人都可以在代码中看到任何可能引起这种行为的危险信号或问题吗?

谢谢

<script type="text/javascript">
(function($) {
$( document ).ready(function() {
$('.et_mobile_menu li a').click(function(){
$('.et_slide_in_menu_container .mobile_menu_bar').trigger('click');
console.log('done');
});
});
})(jQuery);

function _setTab(){
    // get current hash value
    var curHash = window.location.hash.substr(1);
    // only continue if hash provided and scoped to member tabs
    if( !curHash || !curHash.match('my-tabs') ){ return false; }

    // split and int val tab num
    curHash = parseInt(curHash.split('|')[1]);
    // ignore if tab is current state
    if( curHash === window._tabSelected ){ return false; }
    // set current tab to window
    window._tabSelected = curHash;

    // add click event to tab selected
    switch(curHash){
        case 0:
        case 1:
        case 2:
        case 3:
        case 4:
            jQuery('#my-tabs .et_pb_tab_'+curHash+' a').trigger('click');
        break;

        default:
            return false;
        break;
    }

    // scroll to tabs container
    _scrollToTabs();
}

// scroll to member tabs container with 50px offset
function _scrollToTabs(){
    var oTabs = jQuery('#my-tabs');
    if( oTabs.length > 0 ){
        jQuery('html,body').animate({
            scrollTop: (oTabs.offset().top - 50)
        }, 1000);
    }
    return false;
}

// set falsey state for tab selected on load
window._tabSelected = false;

// attach to window load because the tabs functions are initialized later in document
jQuery(window).on('load', function(){
    // check for initial hash state
    _setTab();

    // add hash change window listener
    jQuery(window).on('hashchange', function(){
        _setTab()
    });

    // void submenu when we are in member section 
    var curPath = window.location.pathname;
    if( curPath.match('midtown') ){
        // only change hash and do not reload page
        jQuery('#menu-item-665 ul li a').on('click', function(e){
            e.stopImmediatePropagation();
            window.location.hash = jQuery(this).prop('hash');
            return false;
        });
    }
});

1 个答案:

答案 0 :(得分:0)

发现了问题。在click事件中未正确调用正确的div容器;

// add click event to tab selected
switch(curHash){
    case 0:
      jQuery('#my-tabs .et_pb_tabs_controls .et_pb_tab_'+curHash+' a').click();
      break;
    case 1:
      jQuery('#my-tabs .et_pb_tabs_controls .et_pb_tab_'+curHash+' a').click();
      break;
    case 2:
      jQuery('#my-tabs .et_pb_tabs_controls .et_pb_tab_'+curHash+' a').click();
      break;
    case 3:
      jQuery('#my-tabs .et_pb_tabs_controls .et_pb_tab_'+curHash+' a').click();
      break;
    case 4:
      jQuery('#my-tabs .et_pb_tabs_controls .et_pb_tab_'+curHash+' a').click();
    break;

    default:
        return false;
    break;
}