更改頁面 div 中的文本

Question

我正在嘗試制作類似文本旋轉器的東西。 當我單擊關於選項卡時，我只想顯示有關信息，當我單擊項目時，我想刪除有關文本並將其替換為項目文本，並與其他相同，具體取決於我實際按下的內容。

我可以讓它一個下一個出現。 但這不是我想要的。 希望你們明白我想做什么。

不要為我寫！ 請告訴我應該在哪里尋找它，我應該使用循環嗎？

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');

})

Answer 1

對於您的選項卡，添加一個名為tab的類，並為您的所有內容段落添加一個tab-content類。

然后為tab類創建一個點擊事件。 在點擊事件中獲取被點擊的內容的 ID，並使用它來確定要顯示的內容。 首先，隱藏所有選項卡內容段落，然后僅顯示基於傳遞的 ID 的段落。

Answer 2

您快到了。 請記住，您需要隱藏所有不想在每次單擊時顯示的段落。 所以循環是一個好主意。 然后顯示唯一的。

這是一個代碼片段，它與您的方法略有不同，以防您陷入困境。 繼續你的解決方案！

 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>