html Табы/вкладки/переключалка - какврейтингахинетолько）

Posted 2021-05-11

<!--Если не переключаются, добавить этот скрипт — в кодпарт или еще куда-то откуда его не вырежет админка -->
<script>
function switchHolderMenu(hash) {
    $('.holder').css('visibility', 'hidden');

    if ( $('.holder_' + hash.replace(/^#/, '') ).length ) {
        $('.holder_' + hash.replace(/^#/, '')).css('visibility', 'inherit');
    } else if ( $('.holder_menu_' + hash.replace(/^#/, '') ).length ) {
        $('.holder_menu_' + hash.replace(/^#/, '')).css('visibility', 'inherit');
    } else {
        $('.holder_menu').css('visibility', 'inherit');
    }
}

function initFdpSwitcher() {

    var hash = window.location.hash;

    if (jQuery('.js-switcher li').length == 0 && hash && hash.length) 
        switchHolderMenu(hash.replace(/^#/, ''));

    var tabSwitcher = new als.Switcher(jQuery('.js-switcher li'), jQuery('.tab_content'));

    function selectTabByHash(switcher) {

        hash = window.location.hash;

        if (hash && hash.length) 
            switcher.setName(hash.replace(/^#/, ''));

        if ( $('.tab_content').length ) {
            switchHolderMenu(hash);
        }

    }

    selectTabByHash(tabSwitcher);
    tabSwitcher.addEventListener(als.Switcher.EventType.CHANGE, function (e) {
        var name = tabSwitcher.getName() || '';
        if ( !window['__skipHashSwitcher'] ) {
            window.location.hash = name ? '#' + name : '';
        } else {
            window['__skipHashSwitcher'] = undefined;
        }
    });
    $(window).on('hashchange', function() {
        selectTabByHash(tabSwitcher);
    });

    function showTabSectionAtIndex(tab, index) {
        $(tab).find('.section_content').hide().eq(index).show();
    }

    $('.tab_content').each(function () {
        showTabSectionAtIndex(this, 0);
    });

    $('.tabs .tab').click(function () {
        $(this).addClass('tab_pressed').children().removeClass('link pseudo_link');
        $(this).siblings().removeClass('tab_pressed').children().addClass('link pseudo_link');
        showTabSectionAtIndex($(this).closest('.tab_content'), $(this).index());
    });

    return tabSwitcher;
}

var switcher;
$(function() {
    switcher = initFdpSwitcher();
});
</script>

<div class="tab_content" style="margin-top: 1em;">
	<div class="tabs">
		<span class="tab tab_pressed"> <span>Название вкладки 1</span> </span> 
		<span class="tab"> <span class="link pseudo_link">Название вкладки 2</span> </span>
	</div>

	<div class="section_content" style="display: block;">
		<!-- Содержимое вкладки 1 -->
		<!-- … -->
	</div>

	<div class="section_content" style="display: none;">
		<!-- Содержимое вкладки 2 -->
		<!-- … -->
	</div>
</div>