<!DOCTYPE html>
<html>
<title></title>
<head>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">
/*
 * 1.先手動寫出你要的tab項目 並新增以下class項目:個別名稱 第一個已經被選:tab-active
   2.第一頁之外的其他 全部隱藏
   3.按下tab: 全部清除(清除預設的第一個tab-active ->動態新增已選取的class name
   4.
 */
$(document).ready(function(){
    $('.product, .download').hide();

    var $tab = $('.tab_list').find('li');
    $tab.click(function(){
        $tab.removeClass('tab-active');
        $(this).addClass('tab-active');/*動態新增以選取的class*/
        $('.home, .product, .download').hide();/*點選後 先全部隱藏*/
                
        if($(this).hasClass('t2')){
            $('.product').show();
        }
        else if($(this).hasClass('t3')){
            $('.download').show();
        }
        else if($(this).hasClass('t1')){
            $('.home').show();
        }
                
    })
     
});
</script>
<style type="text/css">
ul li {
    list-style: none;
    margin-right: 10px;
}
</style>
</head>
<body>
<div class='all'>
<div class='tab_list'>
<ul>
    <li class='t1 tab-active'>Home</li>
    <li class='t2'>Product</li>
    <li class='t3'>download</li>
</ul>
</div>
<div class='home'>home content</div>
<div class='product'>peoduct content</div>
<div class='download'>download content</div>
</div>
</body>
</html>

cabuchi 發表在 痞客邦 PIXNET 留言(0) 人氣()