2020.12.04

Jquery 가볍게 다뤄보기

 

HTML

            <div class="tabside">
              <ul class="tabMenu">
                <li class="active">Mission</li>
                <li>Vision</li>
                <li>Sponsors</li>
              </ul>

              <div class="tabPanel clear">
                <div class="tabImage">
                  <div class="img1">
                    <figure>
                      <img src="img/about-img1.jpg" alt="about-img1" />
                    </figure>
                  </div>
                  <div class="img2">
                    <figure>
                      <img src="img/about-img2.jpg" alt="about-img2" />
                    </figure>
                  </div>
                </div>
                <div class="tabTxt">
                  <h3>
                    SED AC URNA SIT AMET LOREM<span
                      >TACITI SOCIOSQU AD LITORA TORQUENT PER CONUBIA</span
                    >
                  </h3>
                  <p>
                    November is free HTML CSS website template from templatemo
                    and you can download and use it for any purpose. Lorem ipsum
                    dolor sit amet, consectetur adipiscing elit. Nullam elit
                    nunc, porta commodo euismod eu, fermentum a neque. Fusce
                    scelerisque tincidunt auctor. Integer varius ullamcorper
                    interdum.
                  </p>
                  <p>
                    Phasellus pretium elementum rhoncus. Aenean sit amet odio eu
                    ante volutpat rutrum. Vestibulum ullamcorper faucibus orci,
                    in blandit massa fringilla at. Nulla in fermentum eros.
                    Suspendisse vitae aliquam metus.
                  </p>
                </div>
              </div>
              <!-- end of tab panel 1 -->

              <div class="tabPanel clear">
                <div class="tabImage">
                  <div class="img1">
                    <figure>
                      <img src="img/about-img1.jpg" alt="about-img1" />
                    </figure>
                  </div>
                  <div class="img2">
                    <figure>
                      <img src="img/about-img2.jpg" alt="about-img2" />
                    </figure>
                  </div>
                </div>
                <div class="tabTxt">
                  <h3>
                    SMAURIS VITAE CONSEQUAT<span
                      >VESTIBULUM ULLAMCORPER FAUCIBUS ORCI</span
                    >
                  </h3>
                  <p>
                    Consequat ipsum, nec sagittis sem nibh id elit. Dui sed odio
                    sit amet nibh vulputate cursus a sit amet mauris. Morbi
                    accumsan ipsum velit. Namslo nec tellus a odio tincidunt
                    auctor a ornare odio. Smauris vitae erat consequat sitsrl
                    amet soi mauris auctor eu in elit.
                  </p>
                  <p>
                    Class aptent taciti sociosqu ad litora torquent per conubia
                    nostraper inceptos himenaeos. Mauris in erat justo. Nullam
                    ac urna eu felis dapibus.
                  </p>
                </div>
              </div>
              <!-- end of tab panel 2 -->

              <div class="tabPanel clear">
                <div class="tabImage">
                  <div class="img1">
                    <figure>
                      <img src="img/about-img1.jpg" alt="about-img1" />
                    </figure>
                  </div>
                  <div class="img2">
                    <figure>
                      <img src="img/about-img2.jpg" alt="about-img2" />
                    </figure>
                  </div>
                </div>
                <div class="tabTxt">
                  <h3>
                    DONEC MOLESTIE MALESUADA NISL<span
                      >AENEAN EGET CONSEQUAT DIAM</span
                    >
                  </h3>
                  <p>
                    Nullam at sem non enim aliquam ultrices non quis magna. In
                    interdum interdum magna vitae accumsan. Etiam turpis tortor,
                    malesuada vitae metus non, pharetra auctor mi. Pellentesque
                    tincidunt enim vitae tincidunt euismod. Integer id ex enim.
                    Nullam euismod efficitur libero quis interdum.
                  </p>
                  <p>
                    Phasellus porttitor tempus nibh, id luctus nibh porta ac.
                    Nunc sed metus est. Proin ut nisi metus. Duis consectetur
                    purus iaculis ornare suscipit.
                  </p>
                </div>
              </div>
              <!-- end of tab panel 3 -->
            </div>

CSS

.aboutSec .tabside {
  padding: 90px 0;
  width: 100%;
}

.aboutSec .tabside ul {
  list-style: none;
  margin: 0;
  padding-bottom: 59px;
}

.aboutSec .tabside li {
  display: inline-block;
  padding: 14px 40px 13px 40px;
  margin: 0;
  font-size: 18px;
  color: #989898;
  font-family: "open sans";
  font-weight: 400;
  text-transform: uppercase;
  border: 1px solid #d5d5d5;
  cursor: pointer;
  transition: all 0.4s;
}

.aboutSec .tabside li:hover,
.aboutSec .tabside li.active {
  border: 1px solid #ff9408;
  background: #ff9408;
  color: #fff;
}

/* panel JS 초석  */
.aboutSec .tabside .tabPanel {
  display: none;
}

 

 

JS

  //tab section functions
  let tabFunc = function(){
    // .tabPanel index0 show
    $(".tabPanel").eq(0).show();
    // tab activate
    function activateTab(){
      $(".tabMenu li").click(function(){
        let tabIndex = $(this).index();
        // console.log(tabIndex)
        $(".tabMenu li").removeClass("active");
        $(".tabMenu li").eq(tabIndex).addClass("active");

        $(".tabPanel").hide();
        // $(".tabPanel").show();
        $(".tabPanel").eq(tabIndex).show();
      });
    }
   activateTab();
  }

  tabFunc();

});

 $(".tabPanel").eq(0).show();

클릭하기 전 이벤트. 항상 tabPanel의 첫번째 패널이 떠있게 한다.

 

function activateTab(){
      $(".tabMenu li").click(function(){
        let tabIndex = $(this).index();
        // console.log(tabIndex)
        $(".tabMenu li").removeClass("active");
        $(".tabMenu li").eq(tabIndex).addClass("active");

클릭했을 때 li에 담긴 class="active"를 모두 삭제했다가 클릭한 탭에만 class="active"를 넣는다.

 

       $(".tabPanel").hide();
        $(".tabPanel").eq(tabIndex).show();
      });

클릭했을 때 tabPanel을 모두 숨겼다가 클릭한 패널만 보여준다.