jQuery做選項卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery做選項卡</title>
    <style type="text/css">
        .btns{
            width: 500px;
            height: 50px;
        }
        /*選項卡的樣式*/
        .btns input{
            width: 100px;
            height: 50px;
            background-color: #ddd;/*默認灰色*/
            color: #666;
            border: 0px;
        }
        /*被選中的選項卡的樣式*/
        .btns input.cur{
            background-color: gold;
        }
        /*內容區的樣式*/
        .contents div{
            width: 500px;
            height: 300px;
            background-color: gold;
            display: none;/*默認隱藏*/
            line-height: 300px;
            text-align: center;
        }
        /*被選中的內容區的樣式*/
        .contents div.active{
            display: block;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('#btns input').click(function() {
                //失去焦點，避免出現默認的藍框
                $(this).blur();
                //this是原生的對象
                // alert(this);//彈出[object HTMLInputElement]，說明this就是當前點擊的input元素

                //jQuery的this對象使用時要用$()包起來，這樣就可以調用jQuery的方法了
                //給當前元素添加選中樣式，為兄弟元素移除選中樣式
                $(this).addClass('cur').siblings().removeClass('cur');

                //$(this).index()獲取當前按鈕所在層級范圍的索引值
                //顯示對應索引的內容區，隱藏其它兄弟內容區
                $('#contents div').eq($(this).index()).addClass('active').siblings().removeClass('active');
            });
        })
    </script>
</head>
<body>
    <div class="btns" id="btns">
        <input type="button" value="tab01" class="cur">
        <input type="button" value="tab02">
        <input type="button" value="tab03">
    </div>
    <div class="contents" id="contents">
        <div class="active">tab文字內容一</div>
        <div>tab文字內容二</div>
        <div>tab文字內容三</div>
    </div>
</body>
</html>
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容