제이쿼리, 자바스크립트를 이용한 간단한 탭

 

html

<ul class="tab">
     <li class="active">Recently</li>
     <li>World</li>
</ul>
 
<div class="tab-content">
    <div>
         <h3>Recently</h3>
         <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Itaque ut facilis corporis ducimus saepe totam? 
            Nobis esse sequi modi est, facere cum voluptatum alias perspiciatis odit, ex neque ipsa veritatis! Blanditiis labore commodi a, neque et nulla eius obcaecati ipsum.</p>
    </div>
    <div>
         <h3>World</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum est, ab enim illo architecto ex molestiae minus recusandae unde, praesentium, 
            velit debitis dignissimos nostrum! Quod sit voluptatibus exercitationem voluptates incidunt illum modi doloribus cupiditate beatae iure id dolor, 
            laboriosam veritatis tempore accusamus reiciendis amet laborum aliquid magnam repellat explicabo unde.</p>
    </div>
</div>

 

 

css

<style>
.tab {
  overflow: hidden;
}

.tab li {
  float: left;
  padding: 20px;
  border-top: 1px solid #ededed;
  border-right: 1px solid #ededed;
  border-left: 1px solid #ededed;
  cursor: pointer;
}

.tab li:first-child {
  border-right: none;
  border-bottom: none;
}

.tab-content {
  padding: 20px;
  border: 1px solid #ededed;
  border-radius: 0 0 4px 4px;
  -webkit-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.04);
          box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.04);
}

.tab-content div h3 {
  margin-bottom: 20px;
  color: #6b54bd;
  font-weight: bold;
}

.tab-content div p {
  line-height: 1.5;
}

.tab-content div:nth-child(2) {
  position: relative;
  top: 0px;
  left: 0px;
}

.tab-content div:last-child {
  display: none;
}

.active {
  background-color: #6b54bd;
  color: #fff;
  font-weight: bold;
}
</style>

 

 

js

<script>
$('.tab li').click(function() { 
    $('.tab li').removeClass('active'); 
    $(this).addClass('active'); // 

    var index = $(this).index(); // 
    $('.tab-content div').css('display','none'); 
    $('.tab-content div').eq(index).css('display','block');
})
</script>