• При клике на ссылку показать 1 блок из 3-х?

    dalisoft
    @dalisoft
    JS Developer
    JS:
    var links = [].slice.call(document.querySelectorAll('.links__link'));
    var blocks = [].slice.call(document.querySelectorAll('.blocks__block'));
    function resetBlocks () {
    blocks.map(function(block){
    block.classList.remove('active');
    });
    }
    links.map(function(link){
    link.addEventListener('click', function() {
    resetBlocks();
    var target = document.querySelector(link.getAttribute('data-target'));
    target.classList.add('active');
    });
    });


    HTML:
    <div class="blocks">
    <div class="blocks__block blocks__block_1 active">BLOCK 1</div>
    <div class="blocks__block blocks__block_2">BLOCK 2</div>
    <div class="blocks__block blocks__block_3">BLOCK 3</div>
    </div>
    <div class="links">
    <a class="links__link links__link_1" data-target=".blocks__block_1">Link 1</a>
    <a class="links__link links__link_2" data-target=".blocks__block_2">Link 2</a>
    <a class="links__link links__link_3" data-target=".blocks__block_3">Link 3</a>
    </div>


    CSS:
    .blocks__block {
    display: none;
    }
    .blocks__block.active {
    display: block;
    }


    Demo:
    https://codepen.io/dalisoft/pen/GdoQRm
    Ответ написан