Changing text in page div

问题: im trying to make something like text rotator. When i click on About tab i want to show only about info, when i click on projects i want to delete about text and replace it...

问题:

im trying to make something like text rotator. When i click on About tab i want to show only about info, when i click on projects i want to delete about text and replace it with project text and same with other depending which i actually press.

I can make it to appear one under another. But that's not what i want. Hope you guys understand what i want to do.

DON'T WRITE IT FOR ME! Just please tell me where i should look for it, should i use loop?

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

})

回答1:

You're almost there. Keep in mind, that you need to hide all the paragraphs you don't want to show with every click. So a loop is a good idea. And then show the one and only.

Here is a code snippet that does something like that a little different from your approach in case you get stuck. Go on with your solution!

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>


回答2:

For your tabs, add a class called tab and for all of your content paragraphs, give them a class of tab-content.

Then create a click event for the class of tab. In the click event get the ID of what is being clicked on and use that to determine the content to be shown. First, hide ALL of tab-content paragraphs, then only show the paragraph based on the passed ID.

  • 发表于 2019-03-17 06:52
  • 阅读 ( 166 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除