Изменение текста в div страницы

Я пытаюсь сделать что-то вроде ротатора текста. Когда я нажимаю на вкладку «О программе», я хочу показывать только информацию о проектах, когда я нажимаю на проекты, я хочу удалить текст о тексте и заменить его текстом проекта и тем же другим, в зависимости от того, что я на самом деле нажимаю.

Я могу заставить его появляться один под другим. Но это не то, что я хочу. Надеюсь, вы, ребята, понимаете, что я хочу сделать.

НЕ ПИШИТЕ МНЕ ЭТО! Просто, пожалуйста, скажите мне, где я должен искать это, должен ли я использовать цикл?

HTML:

<main>
            <div class = "menuContainer">
                <ul>
                    <li class = "about" id = "about">
                        <h2>O mnie</h2>
                    </li>
                    <li class = "projects" id = "projects">
                        <h2>Projekty</h2>
                    </li>
                    <li class = "empty">
                        <div class = "circle"></div>
                    </li>

                    <li class = "technology" id = "technology">
                        <h2>Technologie</h2>
                    </li>
                    <li class = "contact" id = "contact">
                        <h2>Kontakt</h2>
                    </li>
                </ul>
            </div>


        <div class = "poleDoZmiany">
            <p id = "doZmiany" class = "zmiana">
                Welcome Lorem ipsum dolor, sit amet consectetur adipisicing elit. Suscipit culpa labore temporibus fugiat eum error hic illo perspiciatis dignissimos, corporis, aut sapiente sint numquam!
            </p>
        </div>

            <p id = "Tekst1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur, natus nam! Excepturi ipsam voluptates magni odio adipisci, officia consequuntur praesentium eos cumque exercitationem soluta, eveniet dolor sed reiciendis asperiores modi pariatur placeat animi, debitis ratione. Hic illo incidunt, praesentium excepturi vero perspiciatis corrupti maxime accusamus, iusto repellendus quam id. </p>

            <p id = "Tekst2">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus sint modi quisquam autem perferendis maxime impedit sed. Doloremque, reprehenderit neque perspiciatis facere quia saepe architecto odio aspernatur, voluptas nobis blanditiis, quisquam beatae?
            </p>

            <p id = "Tekst3">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati, facilis. Deserunt, in.
            </p>

            <p id = "Tekst4">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure fugiat sequi accusantium inventore asperiores magnam impedit sit maiores praesentium! Ea exercitationem, veritatis placeat blanditiis vitae iste, cupiditate asperiores voluptate cumque quisquam ipsam repellat accusamus debitis omnis aliquid! Iste rerum consectetur impedit porro molestias numquam. Facere eveniet at dolorum deleniti! Facilis nisi ut beatae laudantium nulla culpa amet neque inventore at minus. Reiciendis distinctio ab voluptas! Earum excepturi corporis odit?
            </p>

CSS:

main {
    width: 80%;
    position: absolute;
    left: 10%;
    top: 35vh;
    background: white;
    -webkit-box-shadow: 0px 0px 34px 2px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 34px 2px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 34px 2px rgba(0,0,0,0.75);
}

main p {
    margin-top: 90px !important;
    margin: 25px;
    padding: 25px;
    text-align: center;
}

.media {
    text-align: center;
}

.media > img {
    padding: 10px;
}

p {
    display: none;
}

#doZmiany {
    display: block;
}

ЯВАСКРИПТ:

let tekst1 = document.getElementById('Tekst1');
let tekst2 = document.getElementById('Tekst2');
let tekst3 = document.getElementById('Tekst3');
let tekst4 = document.getElementById('Tekst4');

var zmiana = document.getElementById('doZmiany');
const oMnie = document.getElementById('about');
const projekty = document.getElementById('projects');

oMnie.addEventListener('click', function(){
    tekst1.classList.add('zmiana');
})

projekty.addEventListener('click', function(){
    tekst2.classList.add('zmiana');

})
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
69
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Для вкладок добавьте класс вкладка, а для всех абзацев содержимого присвойте им класс вкладка-контент.

Затем создайте событие клика для класса вкладка. В событии клика получите идентификатор того, на что нажали, и используйте его, чтобы определить отображаемый контент. Сначала скройте ВСЕ абзацы вкладка-контент, а затем покажите только абзац на основе переданного идентификатора.

Итак, вы хотите создать список узлов класса TAB и класса TAB-CONTAINER. Затем сделайте каждый контейнер вкладок с display:none; А с прослушивателем событий для класса Tab просто отображать вкладку-контейнер из идентификатора или индекса?

D.Jurczak 15.03.2019 18:09

@D.Jurczak, да, точно. Вы можете использовать getElementsByClassName для обработчика событий класса вместо getElementById.

imvain2 15.03.2019 18:30
Ответ принят как подходящий

Ты почти там. Имейте в виду, что вам нужно скрывать все абзацы, которые вы не хотите показывать, при каждом нажатии. Так что петля - хорошая идея. А потом показать единственный и неповторимый.

Вот фрагмент кода, который делает что-то подобное, немного отличающееся от вашего подхода на случай, если вы застрянете. Продолжайте свое решение!

document.getElementById('tablist').addEventListener('click', function(e){
    const tabs = ['tab1', 'tab2'];
    const ti = tabs.indexOf(e.target.id);
    if (ti !== false){
      for(let i = 0; i < tabs.length; i += 1) {
        if (ti !== i){
          document.getElementById(tabs[i]+'Txt').style.display = 'none';
        }
      }
      document.getElementById(tabs[ti]+'Txt').style.display = 'block';
    }
});
  .hiddenText {
    display: none;
  }
<ul id = "tablist">
<li id = "tab1">tab1</li>
<li id = "tab2">tab2</li>
</ul>

<p id = "tab1Txt" class = "hiddenText">
This is tab1Txt.
</p>

<p id = "tab2Txt" class = "hiddenText">
This is tab2Txt.
</p>

Другие вопросы по теме