頁面Tab切點擊切換

一直對於JS、jquery比較生疏，苦於在前端路上一直是孤軍奮鬥，沒人學習交流，全靠自己琢磨。上家公司時抽了一些空餘時間對於js、jquery的基本知識進行了一些系統的自學，並沒有實際去寫一些相關的項目，但自我感覺已經掌握了不少了，在這種自我感覺良好的情況下跳槽到了現在的公司：有貨，主要工作內容就是活動pc及app頁面的是製作，添加鏈接，基礎到不行的工作。上次的活動需要寫個Tab切，心想還是有點自學基礎的我就開始動手寫了，結果，挫敗感很強啊，一個簡單的tab切換效果寫起來錯誤百出，下面是我一開始的代碼：
CSS部分：

.tab_head{
    width: 100%;
    margin: 0 auto;
    position: relative;
}
.tab_head a{
    position: absolute;
    display: block;
    cursor: pointer;
}
.tab_head_bg{
    display: block;
}
.tab_head_bg img{
    display: block;
    width: 100%;
}

HTML部分：

<div>
            <!--tab頭部-->
            <div class="tab_head">
                <a class="tab1" style="width: 23.5%; height: 100%; left: 3%; top: 0;"></a>
                <a class="tab2" style="width: 23.5%; height: 100%; left: 26.5%; top: 0;"></a>
                <a class="tab3" style="width: 23.5%; height: 100%; left: 50%; top: 0;"></a>
                <a class="tab4" style="width: 23.5%; height: 100%; left: 73.5%; top: 0;"></a>
                <div class="tab_head_bg"><img class="imgclass" src="bg_09.jpg"></div>
            </div>
            <!--tab內容部分-->
            <div class="bg1" style="display: block;">
                <div style="width: 100%; height: 400px; background-color: #5588AA;">
                    <p style=" font: bold 16px/24px '微軟雅黑'; color: #FFFF00; text-align: center;">tab1</p>
                    <p style=" font: bold 16px/24px '微軟雅黑'; color: #FFFF00; text-align: center;">tab1</p>
                    <p style=" font: bold 16px/24px '微軟雅黑'; color: #FFFF00; text-align: center;">tab1</p>
                </div>
            </div>
            <div class="bg2" style="display: none;">
                <div style="width: 100%; height: 400px; background-color: #5588AA;">
                    <p style=" font: bold 16px/24px '微軟雅黑'; color: #FFFF00; text-align: center;">tab2</p>
                    <p style=" font: bold 16px/24px '微軟雅黑'; color: #FFFF00; text-align: center;">tab2</p>
                    <p style=" font: bold 16px/24px '微軟雅黑'; color: #FFFF00; text-align: center;">tab2</p>
                </div>
            </div>
            <div class="bg3" style="display: none;">
                <div style="width: 100%; height: 400px; background-color: #5588AA;">
                    <p style=" font: bold 16px/24px '微軟雅黑'; color: #FFFF00; text-align: center;">tab3</p>
                    <p style=" font: bold 16px/24px '微軟雅黑'; color: #FFFF00; text-align: center;">tab3</p>
                    <p style=" font: bold 16px/24px '微軟雅黑'; color: #FFFF00; text-align: center;">tab3</p>
                </div>
            </div>
            <div class="bg4" style="display: none;">
                <div style="width: 100%; height: 400px; background-color: #5588AA;">
                    <p style=" font: bold 16px/24px '微軟雅黑'; color: #FFFF00; text-align: center;">tab4</p>
                    <p style=" font: bold 16px/24px '微軟雅黑'; color: #FFFF00; text-align: center;">tab4</p>
                    <p style=" font: bold 16px/24px '微軟雅黑'; color: #FFFF00; text-align: center;">tab4</p>
                </div>
            </div>
        </div>

JS部分

$(function(){
                $('.tab1').click(function () {
                    $('.imgclass').attr('src','bg_09.jpg')
                    $('.bg1').css('display','block');
                    $('.bg2').css('display','none');
                    $('.bg3').css('display','none');
                    $('.bg4').css('display','none');
                });
                $('.tab2').click(function () {
                    $('.imgclass').attr('src','bg2_09.jpg')
                    $('.bg1').css('display','none');
                    $('.bg2').css('display','block');
                    $('.bg3').css('display','none');
                    $('.bg4').css('display','none');
                })
                $('.tab3').click(function () {
                    $('.imgclass').attr('src','bg3_09.jpg')
                    $('.bg1').css('display','none');
                    $('.bg2').css('display','none');
                    $('.bg3').css('display','block');
                    $('.bg4').css('display','none');
                })
                $('.tab4').click(function () {
                    $('.imgclass').attr('src','bg4_09.jpg')
                    $('.bg1').css('display','none');
                    $('.bg2').css('display','none');
                    $('.bg3').css('display','none');
                    $('.bg4').css('display','block');
                })
            })

效果是實現了，但是一股濃濃的小學生流水賬的味道。因爲寫的是app頁面，所以tab切部分就是一個背景圖，上面寫的幾個絕對定位的a標籤。
下面是改良版：
CSS部分：

.tab_head{
    width: 100%;
    margin: 0 auto;
    position: relative;
}
.tab_head a{
    position: absolute;
    display: block;
    cursor: pointer;
}
.tab_head_bg{
    display: block;
}
.tab_head_bg img{
    display: block;
    width: 100%;
}
.hide {
          display: none
      }

HTML部分：

<div>
            <!--tab頭部-->
            <div class="tab_head">
                <a class="tab1" style="width: 23.5%; height: 100%; left: 3%; top: 0;"onClick="return false;"></a>
                <a class="tab2" style="width: 23.5%; height: 100%; left: 26.5%; top: 0;"onClick="return false;"></a>
                <a class="tab3" style="width: 23.5%; height: 100%; left: 50%; top: 0;"onClick="return false;"></a>
                <a class="tab4" style="width: 23.5%; height: 100%; left: 73.5%; top: 0;"onClick="return false;"></a>
                <div class="tab_head_bg"><img class="imgclass" src="bg0_09.jpg"></div>
            </div>
            <!--tab內容部分-->
            <div class="tab_box">
                <div>
                    <div style="width: 100%; height: 400px; background-color: #5588AA;">
                        <p style=" font: bold 16px/24px '微軟雅黑'; color: #FFFF00; text-align: center;">tab1</p>
                        <p style=" font: bold 16px/24px '微軟雅黑'; color: #FFFF00; text-align: center;">tab1</p>
                        <p style=" font: bold 16px/24px '微軟雅黑'; color: #FFFF00; text-align: center;">tab1</p>
                    </div>
                </div>
                <div class="hide">
                    <div style="width: 100%; height: 400px; background-color: #5588AA;">
                        <p style=" font: bold 16px/24px '微軟雅黑'; color: #FFFF00; text-align: center;">tab2</p>
                        <p style=" font: bold 16px/24px '微軟雅黑'; color: #FFFF00; text-align: center;">tab2</p>
                        <p style=" font: bold 16px/24px '微軟雅黑'; color: #FFFF00; text-align: center;">tab2</p>
                    </div>
                </div>
                <div class="hide">
                    <div style="width: 100%; height: 400px; background-color: #5588AA;">
                        <p style=" font: bold 16px/24px '微軟雅黑'; color: #FFFF00; text-align: center;">tab3</p>
                        <p style=" font: bold 16px/24px '微軟雅黑'; color: #FFFF00; text-align: center;">tab3</p>
                        <p style=" font: bold 16px/24px '微軟雅黑'; color: #FFFF00; text-align: center;">tab3</p>
                    </div>
                </div>
                <div class="hide">
                    <div style="width: 100%; height: 400px; background-color: #5588AA;">
                        <p style=" font: bold 16px/24px '微軟雅黑'; color: #FFFF00; text-align: center;">tab4</p>
                        <p style=" font: bold 16px/24px '微軟雅黑'; color: #FFFF00; text-align: center;">tab4</p>
                        <p style=" font: bold 16px/24px '微軟雅黑'; color: #FFFF00; text-align: center;">tab4</p>
                    </div>
                </div>
            </div>
        </div>

JS部分：

$(function(){
    var $div_li =$("div.tab_head a");
    $div_li.click(function(){
        var tab_index =$div_li.index(this);
        //alert(tab_index);
        $(this).parent().find('.imgclass').attr("src","bg"+tab_index+"_09.jpg");
        $("div.tab_box>div")
                .eq(tab_index).show()
                .siblings().hide();
    })
})

感覺JS部分簡潔多了。

但是目前爲止，感覺自己還是侷限於寫這種簡單的效果，稍微複雜一丟丟就找不到頭緒了。
還是缺少項目經驗啊，工作到現在周圍始終都只有我一個前端，根本無法進步，只能自己一個人在前端進步路上慢慢摸索了，還是要多寫多寫多寫！