실전퍼블리싱 with jQuery(탭 메뉴 콘텐츠)

탭 메뉴 콘텐츠

---

주요 css속성: flex, box-shadow, filter
주요 jQuery 속성: addClass(), siblings(), removeClass(), attr(), 사용자정의 속성 data-alt

예제보기

HTML

  <div class="testimonial-section">
    <h1><span>CodingWorks</span> Publishing Online Class with Inflearn</h1>
    <div class="testimonial-pic">
      <img class="active" src="./images/face-01.jpg" data-alt="tab1">
      <img src="./images/face-02.jpg" data-alt="tab2">
      <img src="./images/face-03.jpg" data-alt="tab3">
      <img src="./images/face-04.jpg" data-alt="tab4">
    </div>
    <div class="testimonial">
      <div class="content active" id="tab1">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt recusandae iusto magni nobis eligendi beatae, explicabo mollitia consectetur libero? Praesentium explicabo nisi nostrum ratione optio possimus dignissimos repudiandae commodi accusantium! Neque porro ut rerum cumque quis facere modi pariatur possimus adipisci iusto optio cum doloribus ad, quia quas. Quasi, saepe nesciunt quaerat iusto molestiae quibusdam labore neque hic deleniti quia, facere atque amet officiis minima enim quis. Temporibus minima libero, molestias consequatur at dolores quibusdam ipsum eaque reiciendis vitae. Ut?</p>
        <p>Sally, Web Desginer</p>
      </div>
      <div class="content" id="tab2">
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Provident eligendi deserunt quas quod, ducimus modi temporibus odio saepe vitae facere ab labore soluta ipsa maiores! Exercitationem reprehenderit impedit consequatur totam a doloremque, voluptatem cupiditate nobis? Praesentium asperiores sapiente, eum recusandae a aspernatur repudiandae soluta dicta aperiam maiores nemo, similique perferendis impedit unde est labore ut, facilis in officia porro perspiciatis eaque. Ut voluptatibus molestiae sapiente ad, distinctio provident quia delectus doloribus dolores repudiandae quibusdam debitis velit quisquam.</p>
        <p>Amy, Graphic Designer</p>
      </div>
      <div class="content" id="tab3">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores placeat cum totam, vel, numquam hic iure quaerat suscipit dolore velit ipsum labore eaque eum autem accusamus explicabo facilis soluta, nesciunt repellendus. Deleniti adipisci aspernatur fugiat illum, libero eos obcaecati corporis rem sunt odit nesciunt suscipit repellat sequi debitis assumenda, tenetur enim modi laboriosam ipsum sit totam cumque. Sunt, asperiores exercitationem? Animi error cumque ut dignissimos odit reiciendis, delectus asperiores accusantium eaque iusto vitae a rem illo voluptates, sapiente repudiandae ad.</p>
        <p>Jung Ho, Developer</p>
      </div>
      <div class="content" id="tab4">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores placeat cum totam, vel, numquam hic iure quaerat suscipit dolore velit ipsum labore eaque eum autem accusamus explicabo facilis soluta, nesciunt repellendus. Deleniti adipisci aspernatur fugiat illum, libero eos obcaecati corporis rem sunt odit nesciunt suscipit repellat sequi debitis assumenda, tenetur enim modi laboriosam ipsum sit totam cumque. Sunt, asperiores exercitationem? Animi error cumque ut dignissimos odit reiciendis, delectus asperiores accusantium eaque iusto vitae a rem illo voluptates, sapiente repudiandae ad.</p>
        <p>Chris, Printing Desinger</p>
      </div>
    </div>
  </div>

CSS

/* Google Web Font */
@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');

body {
  font-family: 'Raleway', sans-serif;
  line-height: 1.5em;
  margin: 0;
  background-color: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
a {
  text-decoration: none;
  color: #222;
}
.testimonial-section {
  width: 800px;
  text-align: center;
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}
.testimonial-section h1 {
  font-size: 25px;
  margin-bottom: 30px;
}
.testimonial-section h1 span {
  color: crimson;
}
.testimonial-pic img {
  width: 100px;
  filter: grayscale(1);
  margin: 5px;
  transition: 0.3s;
  cursor: pointer;
}
.testimonial-pic img.active {
  /* filter: grayscale(0); */
  filter: none;
  border-radius: 50%;
}
.testimonial {
  position: relative; /* .content의 부모요소로 확정 */
  min-height: 230px; /* .content가 absolute되면서 잃어 버린 높이값 찾아주기 */
}
.testimonial .content {
  display: none;
  position: absolute;  /* .content 들을 부모요소(.testimonial)의 왼쪽 상단으로 위치하기 */
}
.testimonial .content p:nth-child(2) {
  font-weight: bold;
}
.testimonial .content.active {
  display: block;
}

JS

$('.testimonial-pic img').click(function() {
  $(this).addClass('active')
  $(this).siblings().removeClass('active')
  
  $('.testimonial .content').fadeOut('active')  
  // tab1 == $(this).attr('data-alt')
  $('#' + $(this).attr('data-alt')).fadeIn('active')
})