読者です 読者をやめる 読者になる 読者になる

東京の会社辞めて地方で生きるわ。

勢いで会社を辞めて縁のない地方で生きることはできるのか

【jQuery】レスポンシブ対応のタブコンテンツ「Basic Tabs」設置方法

jQuery 備忘録

①html記述

<div id="tabwrap">
          
    <!-- TABS -->  
    <ul id="tabs">
        <li class="current"><a href="#home">タブ1</a></li>
        <li><a href="#about">タブ2</a></li>
        <li><a href="#services">タブ3</a></li>
        <li><a href="#contact">タブ4</a></li>
    </ul>
  
    <!-- TAB CONTENT -->
    <div id="content">
        <div id="home" class="current">
            <p>コンテンツ1</p>
        </div>
        <div id="about">
            <p>コンテンツ2</p>
        </div>
        <div id="services">
            <p>コンテンツ3</p>
        </div>
        <div id="contact">
            <p>コンテンツ4</p>
        </div>
    </div>
</div>

css記述

#tabwrap { 
    background: #fff; 
    overflow: hidden; 
    width: 600px;
    min-height: 300px;
    margin: 60px auto;
    box-shadow: 0 0 20px #ddd;
    border: 1px solid #ddd;
}
#tabs li { list-style: none; }
#tabs li a { 
    float: left; 
    display: block;
    background: #777;
    padding: 10px;
    color: #fff;
    width: 25%;
    text-decoration: none;
    text-align: center;
    border-right: 1px solid #555;
    border-left: 1px solid #888;
    font-size: 15px;
    text-shadow: 1px 1px 0 #000;
}
  
#tabs li a:hover { background: #666; }
#tabs li:first-child a { border-left: 0; }
#tabs li:last-child a { border-right: 0; }
  
#tabs li.current a { 
    background: #fff; 
    color: #666; 
    text-shadow: 1px 1px 0 #fff;
}
  
#content > div {
    clear: both;
    padding: 20px;
    line-height: 19px;
    color: #666;
    text-shadow: 1px 1px 0 #fff;
    display: none;
}
  
#content .current { display: block; }
#content #home.first { display: block; }
#content p { margin: 0 0 20px 0;}

③js記述

<script type="text/javascript">
$('#tabs li a').click(function(e){
  
    $('#tabs li, #content .current').removeClass('current').removeClass('fadeInLeft');
    $(this).parent().addClass('current');
    var currentTab = $(this).attr('href');
    $(currentTab).addClass('current fadeInLeft');
    e.preventDefault();
  
});
</script>