It is necessary that when you click on the numbers highlighted in red, the content highlighted in green changes. Just starting my journey in the layout, tell me with what (which language or structure) can I implement? If anyone has a similar example, I’m also happy to see. enter image description here

Closed due to the fact that the participants are entithat , Air , UModeL , 0xdb , Eugene Krivenja on Jan 9 at 12:33 .

It seems that this question does not correspond to the subject of the site. Those who voted to close it indicated the following reason:

  • " Learning tasks are allowed as questions only on the condition that you tried to solve them yourself before asking a question . Please edit the question and indicate what caused you difficulties in solving the problem. For example, give the code you wrote, trying to solve the problem "- entithat, UModeL, 0xdb, Eugene Krivenja
If the question can be reformulated according to the rules set out in the certificate , edit it .

  • Look in the direction of the sliders or tabs - meine
  • This is a classic question about tabs. Here he was answered many times already. Use the search. - Andrey Fedorov
  • Thank you, now at least I know what it's called) - Anton Anton

3 answers 3

With tabs it will be easier, because they are simple in themselves.

Here is an option written.
To work tabs used library Jquery

 $('.tab .tab-selector .item').on('click', function(){ if(!$(this).hasClass('active')) { // ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅ΠΌ, Ρ‡Ρ‚ΠΎ наТатая Π²ΠΊΠ»Π°Π΄ΠΊΠ° НЕ являСтся Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠΉ. let thisIndex = $(this).index(); // ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅ΠΌ какая ΠΏΠΎ счёту ΠΊΠ½ΠΎΠΏΠΊΠ° Π½Π°ΠΆΠ°Ρ‚Π°. // "ΠΏΠ΅Ρ€Π΅Π²Π΅ΡˆΠΈΠ²Π°Π΅ΠΌ" класс active $('.tab-selector .item.active').removeClass('active'); $(this).addClass('active'); // Π”Π°Π»Π΅Π΅ опрСдСляСм ΠΊΠ°ΠΊΠΎΠΉ слайд Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π²Π΅Π½ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠΉ, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ содСрТится индСкс Π½Π°ΠΆΠ°Ρ‚ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ. let thisSlide = $('.tab .tab-content .slide').eq(thisIndex); // Π—Π°ΠΏΠΈΡˆΠ΅ΠΌ Π² ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½ΡƒΡŽ // "ΠΏΠ΅Ρ€Π΅Π²Π΅ΡˆΠ°Π΅ΠΌ" класс active ΠΈ слайдам $('.tab-content .slide.active').removeClass('active'); thisSlide.addClass('active'); } }); 
 .tab {width: 360px;} .tab-selector {display: block; width: 100%; height: 40px; font-size: 0; margin-bottom: 20px;} .tab-selector .item {display: inline-block; width: 40px; height: 40px; line-height: 40px; text-align: center; border: 2px solid #000; color: #000; box-sizing: border-box; cursor: pointer; position: relative; margin-right: 40px; font-size: 15px;} .tab-selector .item::before {content: 'β€’β€’β€’β€’β€’'; display: block; width: 40px; height: 40px; line-height: 40px; text-align: center; position: absolute; right: -42px; top: -2px; color: red; letter-spacing: 2px; pointer-events: none;} .tab-selector .item:last-child {margin-right: 0;} .tab-selector .item:last-child::before {display: none;} .tab-selector .item.active {border-color: red; color: red;} .tab-selector .item:hover {border-color: red;} .tab-content {display: block; width: 100%;} .tab-content .slide {display: none; width: 100%;} .tab-content .slide.active {display: block;} .slide::after {content: ''; display: block; clear: both;} .slide .left, .slide .right {display: inline-block; width: 50%; float: left;} .slide .left h2, .slide .left p {display: block; padding: 0; margin: 0;} .slide .left h2::after {content: ''; display: block; width: 40%; height: 4px; background: red; margin: 5px 0;} .slide .right img {width: 100%;} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="tab"> <div class="tab-selector"> <div class="item active">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> </div> <div class="tab-content"> <div class="slide active"> <div class="left"> <h2>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ 1</h2> <p>ОписаниС</p> </div> <div class="right"> <img src="https://via.placeholder.com/400x250?text=Slide 1"> </div> </div> <div class="slide"> <div class="left"> <h2>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ 2</h2> <p>ОписаниС</p> </div> <div class="right"> <img src="https://via.placeholder.com/400x250?text=Slide 2"> </div> </div> <div class="slide"> <div class="left"> <h2>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ 3</h2> <p>ОписаниС</p> </div> <div class="right"> <img src="https://via.placeholder.com/400x250?text=Slide 3"> </div> </div> <div class="slide"> <div class="left"> <h2>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ 4</h2> <p>ОписаниС</p> </div> <div class="right"> <img src="https://via.placeholder.com/400x250?text=Slide 4"> </div> </div> <div class="slide"> <div class="left"> <h2>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ 5</h2> <p>ОписаниС</p> </div> <div class="right"> <img src="https://via.placeholder.com/400x250?text=Slide 5"> </div> </div> </div> </div>

  • Thank you for the detailed answer! - Anton Anton
  • Anything can be minus, but no one can justify a minus .., and not people. - CbIPoK2513

This is the classic task of using tabs. You can use for example jquery tabs. But if js is not yet possible to study, there is an option to adapt the slider layout on the pure css to the task.

  • Thank you, js while superficially studied, be sure to look. - Anton Anton

Here is a sample code.

And on this link you will find a lot of solutions for questions that arise for beginners.

 function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " active"; } // Get the element with id="defaultOpen" and click on it document.getElementById("defaultOpen").click(); 
 body {font-family: Arial;} /* Style the tab */ .tab { overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1; } /* Style the buttons inside the tab */ .tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; font-size: 17px; } /* Change background color of buttons on hover */ .tab button:hover { background-color: #ddd; } /* Create an active/current tablink class */ .tab button.active { background-color: #ccc; } /* Style the tab content */ .tabcontent { display: none; padding: 6px 12px; border: 1px solid #ccc; border-top: none; } /* Style the close button */ .topright { float: right; cursor: pointer; font-size: 28px; } .topright:hover {color: red;} 
 <h2>Tabs</h2> <p>Click on the x button in the top right corner to close the current tab:</p> <div class="tab"> <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button> <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button> <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button> </div> <div id="London" class="tabcontent"> <span onclick="this.parentElement.style.display='none'" class="topright">&times</span> <h3>London</h3> <p>London is the capital city of England.</p> </div> <div id="Paris" class="tabcontent"> <span onclick="this.parentElement.style.display='none'" class="topright">&times</span> <h3>Paris</h3> <p>Paris is the capital of France.</p> </div> <div id="Tokyo" class="tabcontent"> <span onclick="this.parentElement.style.display='none'" class="topright">&times</span> <h3>Tokyo</h3> <p>Tokyo is the capital of Japan.</p> </div>

  • I will try everything, thanks for the detailed answer! - Anton Anton