Question

im试图制作类似文本旋转器的内容。当我单击“关于”选项卡时，我只想显示有关信息的信息，当我单击项目时，我想删除关于文本的信息，并用项目文本和其他文字替换，具体取决于我实际按下的内容。

我可以使其一个接一个地出现。但这不是我想要的。希望你们明白我想做什么。

不要为我写它！请告诉我应该在哪里寻找，我应该使用循环吗？

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;
}

JAVASCRIPT：

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 类。

然后为标签类创建点击事件。在click事件中，获取正在单击的内容的ID，并使用该ID来确定要显示的内容。首先，隐藏所有 tab-content 段落，然后仅根据传递的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>

更改页面div中的文本

2 个答案: