test1

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>

<a href="#art1" class="work-link">art1 </a>
<a href="#art2" class="work-link">art2 </a>
<a href="#art3" class="work-link">art3 </a>
<a href="#art4" class="work-link">art4 </a>
<a href="#art5" class="work-link">art5 </a>
<a href="#art222" class="work-link">art222 </a>

<div id="art1">art1</div>
<div id="art2">art2</div>
<div id="art3">art3</div>
<div id="art4">art4</div>
<div id="art5">art5</div>
<div id="art222">art222</div>

<script type="text/javascript">
    $(document).ready(function () {

        // przykładowo shcowajmy wszystkie divy na stronie :)
        $(document).find('div').hide();

        $('.work-link').click(function () {
            // bierzemy nazwę z href
            // this wskazuje na bierzacy kliknięty element
            var name = $(this).attr('href');

            // debug na konsole
            console.log('clicked: ' + name);

            // po kliknięciu znowu chowam divy
            $(document).find('div').hide();

            // i pokazuje tylko tego wybranego
            $(name).show();

            // szukanie po ID:
            // $('#ID'), w naszym przypadku link ma href #art3 więc znaku # nie trzeba dokładać do nazwy w tym miejscu
        });

    });
</script>
</body>
</html>