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

탭 메뉴 콘텐츠2 프토로타입(Prototype)

---

주요 css속성: position, background, visibility, overflow, float, ::palceholder, :focus
주요 jQuery 속성: addClass(), siblings(), removeClass(), attr(), 사용자정의 속성 data-alt, let

예제보기

.siblings() 메소드

.siblings() 메소드는 선택한 요소의 형제(sibling) 요소 중에서 지정한 선택자에 해당하는 요소를 모두 선택합니다.

HTML

  <section>
    <div class="heading">
      <h1><span>코딩웍스</span>, 프론트엔드 퍼블리셔 취업을 위한 실전 퍼블리싱 강좌</h1>
      <input type="text" placeholder="What are you looking for?">
    </div>
    <div class="tab-inner">
      <ul class="btn">
        <li data-alt="tab1" class="active">HTML5</li>
        <li data-alt="tab2">CSS3</li>
        <li data-alt="tab3">JQUERY</li>
        <li data-alt="tab4">JAVASCRIPT</li>
        <li data-alt="tab5">CSS FRAMEWORKS</li>
      </ul>
      <div class="tabs">
        <div id="tab1" class="active">
          <h2>HTML5</h2>
          <img src="./images/platform-logo-01.png" alt="HTML5">
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt eligendi alias voluptas sed excepturi iste harum est natus dolores ex. Ipsa natus magni a, earum nisi dolorem fugiat totam repellendus maiores molestias, necessitatibus ea assumenda? Cum in quod voluptatum error porro iste corrupti dicta. Cum nostrum atque maiores asperiores sequi dolore porro accusantium officiis eius, beatae eaque repellendus dignissimos omnis dolorem quis minus nulla incidunt amet labore quasi ullam placeat dolor. Delectus quos fugiat autem tenetur error, reprehenderit ratione nihil voluptatibus. Consectetur deserunt, ratione fugit repudiandae molestiae ad at. Distinctio, dicta. Quas perspiciatis molestias delectus odio dolore atque, nihil sapiente?
          </p>
        </div>
        <div id="tab2">
          <h2>CSS3</h2>
          <img src="./images/platform-logo-02.png" alt="CSS3">
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt eligendi alias voluptas sed excepturi iste harum est natus dolores ex. Ipsa natus magni a, earum nisi dolorem fugiat totam repellendus maiores molestias, necessitatibus ea assumenda? Cum in quod voluptatum error porro iste corrupti dicta. Cum nostrum atque maiores asperiores sequi dolore porro accusantium officiis eius, beatae eaque repellendus dignissimos omnis dolorem quis minus nulla incidunt amet labore quasi ullam placeat dolor. Delectus quos fugiat autem tenetur error, reprehenderit ratione nihil voluptatibus. Consectetur deserunt, ratione fugit repudiandae molestiae ad at. Distinctio, dicta. Quas perspiciatis molestias delectus odio dolore atque, nihil sapiente?
          </p>
        </div>
        <div id="tab3">
          <h2>JQUERY</h2>
          <img src="./images/platform-logo-03.png" alt="JQUERY">
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt eligendi alias voluptas sed excepturi iste harum est natus dolores ex. Ipsa natus magni a, earum nisi dolorem fugiat totam repellendus maiores molestias, necessitatibus ea assumenda? Cum in quod voluptatum error porro iste corrupti dicta. Cum nostrum atque maiores asperiores sequi dolore porro accusantium officiis eius, beatae eaque repellendus dignissimos omnis dolorem quis minus nulla incidunt amet labore quasi ullam placeat dolor. Delectus quos fugiat autem tenetur error, reprehenderit ratione nihil voluptatibus. Consectetur deserunt, ratione fugit repudiandae molestiae ad at. Distinctio, dicta. Quas perspiciatis molestias delectus odio dolore atque, nihil sapiente?
          </p>
        </div>
        <div id="tab4">
          <h2>JAVASCRIPT</h2>
          <img src="./images/platform-logo-04.png" alt="JAVASCRIPT">
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt eligendi alias voluptas sed excepturi iste harum est natus dolores ex. Ipsa natus magni a, earum nisi dolorem fugiat totam repellendus maiores molestias, necessitatibus ea assumenda? Cum in quod voluptatum error porro iste corrupti dicta. Cum nostrum atque maiores asperiores sequi dolore porro accusantium officiis eius, beatae eaque repellendus dignissimos omnis dolorem quis minus nulla incidunt amet labore quasi ullam placeat dolor. Delectus quos fugiat autem tenetur error, reprehenderit ratione nihil voluptatibus. Consectetur deserunt, ratione fugit repudiandae molestiae ad at. Distinctio, dicta. Quas perspiciatis molestias delectus odio dolore atque, nihil sapiente?
          </p>
        </div>
        <div id="tab5">
          <h2>CSS FRAMEWORKS</h2>
          <img src="./images/platform-logo-05.png" alt="CSS FRAMEWORKS">
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt eligendi alias voluptas sed excepturi iste harum est natus dolores ex. Ipsa natus magni a, earum nisi dolorem fugiat totam repellendus maiores molestias, necessitatibus ea assumenda? Cum in quod voluptatum error porro iste corrupti dicta. Cum nostrum atque maiores asperiores sequi dolore porro accusantium officiis eius, beatae eaque repellendus dignissimos omnis dolorem quis minus nulla incidunt amet labore quasi ullam placeat dolor. Delectus quos fugiat autem tenetur error, reprehenderit ratione nihil voluptatibus. Consectetur deserunt, ratione fugit repudiandae molestiae ad at. Distinctio, dicta. Quas perspiciatis molestias delectus odio dolore atque, nihil sapiente?
          </p>
        </div>
      </div>
    </div>
  </section>

CSS

/* Google Web Fonts CDN */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,500,700,900&display=swap');

body {
  font-family: 'Noto Sans KR', sans-serif;
  line-height: 1.5em;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f4f4f4;
  font-weight: 300;
}
a {
  text-decoration: none;
  color: #222;
}

section {
  /* width: 800px; */
}
/* Heading */
.heading {}
.heading h1 {
  font-size: 30px;
  text-align: center;
  font-weight: 500;
  margin-bottom: 30px;
}
.heading h1 span {
  color: crimson;
}
.heading input[type=text] {
  width: 100%;
  border: none;
  outline: none;
  padding: 10px;
  box-sizing: border-box;
  border-bottom: 2px solid #bbb;
  background: #fff url('../images/search-icon.png') no-repeat center left 5px;
  background-size: 23px;
  padding-left: 35px;
}
.heading input[type=text]::placeholder {
  font-style: italic;
  transition: 0.3s;
}
.heading input[type=text]:focus::placeholder {
  opacity: 0;
}

.tab-inner {
  margin-top: 30px;
}
.btn {
  overflow: hidden;
  margin-left: 10px;
}
.btn li {
  float: left;
  border-right: 1px solid #ddd;
  background-color: #eee;
  cursor: pointer;
  font-size: 14px;
  padding: 5px;
  border-top: 2px solid transparent;
  width: 110px;
  text-align: center;
}
.btn li:last-child {
  width: 170px;
  border-right: none;
}
.btn li:hover,
.btn li.active {
  background-color: #fff;
  border-top: 2px solid crimson;

}
/* Tab content */
.tabs {
  width: 800px;
}
.tabs div{
  background-color: #fff;
  padding: 20px;
  box-sizing: border-box;
  border: 1px solid #eee;
  display: none;
}
.tabs div.active{
  display: block;
}
.tabs div h2 {
  text-align: center;
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 10px;
}
.tabs div img {
  float: left;
  margin-right: 20px;
  width: 25%;
}
.tabs div p {
  overflow: hidden;
}

JS

$('.btn li').click(function () {
  $(this).addClass('active')
  $(this).siblings().removeClass('active')

  // tab1 == $(this).attr('data-alt')
  let result = $(this).attr('data-alt')
  $('.tabs div').removeClass('active')
  $('#' + result).addClass('active')
})