Добрый день. нужно сделать из 9 пунктов 1 активный и при нажатии на другой пункт меню, чтобы менялся класс актив ( там убирался а тут добавлялся соотвественно). а так же если это возможно ( это точно как-то возможно, но я новичек) Чтобы при нажатии на другой пункт меню один див скрывался, а второй появлялся
<main class="container-fluid">
<div class="container2">
<div class="block1 d-flex">
<nav class="menu conti">
<a class="active" href="#part1" onclick="onclickbut()">День 1. Варшава</a>
<a class='active' href="#" data-toggle="2">День 2. Первый день в Испании</a>
<a href="#">День 3. Барселона</a>
<a href="#">День 4. Море</a>
<a href="#">День 5. Море</a>
<a href="#">День 6. Барселона</a>
<a href="#">День 7. Салоу</a>
<a href="#">День 8. Пора уезжать</a>
<a href="#">День 9. Закупы, дорога домой</a>
</nav>
<div class="items">
<div class="boxes1">
<div class="box">
<figure>
<img src="../images/warkiss2.jpg" alt="Поцелуй" style="border-radius: 40px; border: 5px #ccc solid; box-shadow: 0 0 10px #444;" >
<Figcaption>
<p>Поцелуйчик</p>
</Figcaption>
</figure>
</div>
<div class="box">
<figure>
<img src="../images/warsmile.jpg" alt="Улыбка" style="border-radius: 40px; border: 5px #ccc solid; box-shadow: 0 0 10px #444;">
<Figcaption>
<p>Улыбка</p>
</Figcaption>
</figure>
</div>
<div class="box">
<figure>
<img src="../images/wartoge1.jpg" alt="Вместе" style="border-radius: 40px; border: 5px #ccc solid; box-shadow: 0 0 10px #444;">
<Figcaption>
<p>Совместная фотокарточка</p>
</Figcaption>
</figure>
</div>
<div class="box">
<figure>
<img src="../images/warfontt22.jpg" alt="Фонтан" style="border-radius: 40px; border: 5px #ccc solid; box-shadow: 0 0 10px #444;">
<Figcaption>
<p>Дворец. Фонтан</p>
</Figcaption>
</figure>
</div>
<div class="box">
<figure>
<img src="../images/warglob.jpg" alt="Глобус" style="border-radius: 40px; border: 5px #ccc solid; box-shadow: 0 0 10px #444;">
<Figcaption>
<p>Глобус Холл</p>
</Figcaption>
</figure>
</div>
<div class="box">
<figure>
<img src="../images/warpainters.jpg" alt="Рисунки" style="border-radius: 40px; border: 5px #ccc solid; box-shadow: 0 0 10px #444;">
<Figcaption>
<p>Детские рисунки</p>
</Figcaption>
</figure>
</div>
<div class="box">
<figure>
<img src="../images/warnail.jpg" alt="Ногти" style="border-radius: 40px; border: 5px #ccc solid; box-shadow: 0 0 10px #444;">
<Figcaption>
<p>Ноготочки</p>
</Figcaption>
</figure>
</div>
<div class="box">
<figure>
<img src="../images/warband.jpg" alt="Группа Мадагаскар" style="border-radius: 40px; border: 5px #ccc solid; box-shadow: 0 0 10px #444;">
<Figcaption>
<p>Группа "Мадагаскар"</p>
</Figcaption>
</figure>
</div>
<div class="box">
<figure>
<img src="../images/warsho.jpg" alt="Барбершоп" style="border-radius: 40px; border: 5px #ccc solid; box-shadow: 0 0 10px #444;">
<Figcaption>
<p>Варшавский Барбершоп</p>
</Figcaption>
</figure>
</div>
</div>
<div class="boxes2">
<div class="box">
<figure>
<img src="../images/day1a.jpg" alt="Поцелуй" style="border-radius: 40px; border: 5px #ccc solid; box-shadow: 0 0 10px #444;" >
<Figcaption>
<p>Поцелуйчик</p>
</Figcaption>
</figure>
</div>
<div class="box">
<figure>
<img src="../images/day1b.jpg" alt="Vlad" style="border-radius: 40px; border: 5px #ccc solid; box-shadow: 0 0 10px #444;">
<Figcaption>
<p>Фото Влад</p>
</Figcaption>
</figure>
</div>
<div class="box">
<figure>
<img src="../images/day1c.jpg" alt="Вместе" style="border-radius: 40px; border: 5px #ccc solid; box-shadow: 0 0 10px #444;">
<Figcaption>
<p>Совместная фотокарточка</p>
</Figcaption>
</figure>
</div>
<div class="box">
<figure>
<img src="../images/day1d.jpg" alt="Фонтан" style="border-radius: 40px; border: 5px #ccc solid; box-shadow: 0 0 10px #444;">
<Figcaption>
<p>Дворец. Фонтан</p>
</Figcaption>
</figure>
</div>
<div class="box">
<figure>
<img src="../images/day1e.jpg" alt="Глобус" style="border-radius: 40px; border: 5px #ccc solid; box-shadow: 0 0 10px #444;">
<Figcaption>
<p>Глобус Холл</p>
</Figcaption>
</figure>
</div>
<div class="box">
<figure>
<img src="../images/day1f.jpg" alt="Группа Мадагаскар" style="border-radius: 40px; border: 5px #ccc solid; box-shadow: 0 0 10px #444;">
<Figcaption>
<p>Мадагаскар</p>
</Figcaption>
</figure>
</div>
<div class="box">
<figure>
<img src="../images/day1g.jpg" alt="Ногти" style="border-radius: 40px; border: 5px #ccc solid; box-shadow: 0 0 10px #444;">
<Figcaption>
<p>Ноготочки</p>
</Figcaption>
</figure>
