前端 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;
        }
        /*內容區(qū)的樣式*/
        .contents div{
            width: 500px;
            height: 300px;
            background-color: gold;
            display: none;/*默認隱藏*/
            line-height: 300px;
            text-align: center;
        }
        /*被選中的內容區(qū)的樣式*/
        .contents div.active{
            display: block;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('#box1 #btns input').click(function() {
                //失去焦點基公，避免出現默認的藍框
                $(this).blur();
                //this是原生的對象
                // alert(this);//彈出[object HTMLInputElement]邻奠，說明this就是當前點擊的input元素

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

                //$(this).index()獲取當前按鈕所在層級范圍的索引值
                //顯示對應索引的內容區(qū)合溺，隱藏其它兄弟內容區(qū)
                $('#box1 #contents div').eq($(this).index()).addClass('active').siblings().removeClass('active');
            });
            
            $('#box2 #btns input').click(function() {
                $(this).blur();
                $(this).addClass('cur').siblings().removeClass('cur');
                $('#box2 #contents div').eq($(this).index()).addClass('active').siblings().removeClass('active');
            });
        })
    </script>
</head>
<body>
    <div id="box1">
        <div class="btns" id="btns">
            <input type="button" value="tab01" class="cur">
            <input type="button" value="tab02">
            <input type="button" value="tab03">
        </div>
    </div>
    <br><br>
    <div id="box2">
        <div class="contents" id="contents">
            <div class="active">tab文字內容一</div>
            <div>tab文字內容二</div>
            <div>tab文字內容三</div>
        </div>
    </div>
</body>
</html>
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市奏纪，隨后出現的幾起案子腌乡，更是在濱河造成了極大的恐慌京髓，老刑警劉巖航缀，帶你破解...
    沈念sama閱讀 218,941評論 6贊 508
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現場離奇詭異朵锣，居然都是意外死亡谬盐，警方通過查閱死者的電腦和手機，發(fā)現死者居然都...
    沈念sama閱讀 93,397評論 3贊 395
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門诚些，熙熙樓的掌柜王于貴愁眉苦臉地迎上來飞傀，“玉大人皇型，你說我怎么就攤上這事≡曳常” “怎么了弃鸦？”我有些...
    開封第一講書人閱讀 165,345評論 0贊 356
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長幢痘。 經常有香客問我唬格，道長，這世上最難降的妖魔是什么颜说？ 我笑而不...
    開封第一講書人閱讀 58,851評論 1贊 295
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任购岗，我火速辦了婚禮，結果婚禮上门粪，老公的妹妹穿的比我還像新娘喊积。我一直安慰自己，他們只是感情好玄妈，可當我...
    茶點故事閱讀 67,868評論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布乾吻。 她就那樣靜靜地躺著，像睡著了一般拟蜻。 火紅的嫁衣襯著肌膚如雪绎签。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 51,688評論 1贊 305
  • 城市分裂傳說
    那天酝锅，我揣著相機與錄音诡必，去河邊找鬼。 笑死屈张，一個胖子當著我的面吹牛菊霜，可吹牛的內容都是我干的信姓。 我是一名探鬼主播，決...
    沈念sama閱讀 40,414評論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼晾腔，長吁一口氣：“原來是場噩夢啊……” “哼愉老！你這毒婦竟也來了场绿？” 一聲冷哼從身側響起，我...
    開封第一講書人閱讀 39,319評論 0贊 276
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤嫉入，失蹤者是張志新（化名）和其女友劉穎焰盗，沒想到半個月后，有當地人在樹林里發(fā)現了一具尸體咒林，經...
    沈念sama閱讀 45,775評論 1贊 315
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡熬拒，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,945評論 3贊 336
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發(fā)現自己被綠了垫竞。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片澎粟。...
    茶點故事閱讀 40,096評論 1贊 350
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡蛀序，死狀恐怖，靈堂內的尸體忽然破棺而出活烙，到底是詐尸還是另有隱情徐裸，我是刑警寧澤，帶...
    沈念sama閱讀 35,789評論 5贊 346
  • ?日本核電站爆炸內幕
    正文 年R本政府宣布啸盏，位于F島的核電站重贺，受9級特大地震影響，放射性物質發(fā)生泄漏回懦。R本人自食惡果不足惜气笙，卻給世界環(huán)境...
    茶點故事閱讀 41,437評論 3贊 331
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望怯晕。 院中可真熱鬧健民，春花似錦、人聲如沸贫贝。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,993評論 0贊 22
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽稚晚。三九已至崇堵，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間客燕，已是汗流浹背鸳劳。 一陣腳步聲響...
    開封第一講書人閱讀 33,107評論 1贊 271
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留也搓，地道東北人赏廓。 一個月前我還...
    沈念sama閱讀 48,308評論 3贊 372
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像傍妒，于是被迫代替她去往敵國和親幔摸。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
    茶點故事閱讀 45,037評論 2贊 355

推薦閱讀更多精彩內容