我是jquery tab切換

<!doctype html>
<html lang="zh-CN">
  <head>
    <!-- 必須的 meta 標(biāo)簽 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>我是jquery tab切換</title>
    <style>
        *{
            padding:0px;
            border:0px;
            margin:0px;
        }
        body,html{
            width:100%;
            height:100%;
        }
        .tab{
            width:100%;
            list-style-type: none;
            position: absolute;
            top:0px;
            z-index: 10;
            height:30px;
        }
        li{
            border:solid 1px #efefef;
            background: #ffffff;
            float:left;
            width:100px;
            height:30px;
        }
        .active{
            border-bottom:solid 1px #ffffff !important;
        }
        .container{
            width:100%;
            border:solid 1px #efefef;
            position: absolute;
            top:31px;
            z-index: 3;
        }
        .container>div{
            width:400px;
            float:left;
        }
    </style>
  </head>
  <body>
    <ul class="tab">
      <li id="tab1" value="1" class="active">10元套餐</li>
      <li id="tab2" value="2">20元套餐</li>
      <li id="tab3" value="3">30元套餐</li>
    </ul>
    <div class="container">
        <div class="content1">我是10元套餐</div>
        <div class="content2" style="display:none">我是20元套餐</div>
        <div class="content3" style="display:none">我是30元套餐</div>
    </div>
    <!-- JavaScript 文件是可選的。從以下兩種建議中選擇一個(gè)即可！ -->

    <!-- 選項(xiàng) 1：jQuery 和 Bootstrap 集成包（集成了 Popper） -->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
      // 給3個(gè)li添加監(jiān)聽事件 第一種
    var $contents = $('.container>div')
    var $tab = $('.tab>li')
    //   $('.tab>li').click(function() { // 隱士遍歷
    //     // 先隱藏所有
    //     $contents.css('display', 'none')
    //     $tab.removeClass('active')
    //     // 再找到當(dāng)前點(diǎn)擊的下標(biāo)
    //     var $index = $(this).index()
    //     // 再將點(diǎn)擊的下表對(duì)應(yīng)的content顯示出來
    //     $contents[$index].style.display = 'block'
    //     // $($contents[$index]).css('display', 'block')
    //     $tab[$index].className = 'active'
    //   })

    // 第二種
      var currentIndex = 0
      $('.tab>li').click(function() { // 隱士遍歷
        // 先隱藏當(dāng)前默認(rèn)選中的
        $contents[currentIndex].style.display = 'none'
        $($tab[currentIndex]).removeClass('active')
        // 再找到當(dāng)前點(diǎn)擊的下標(biāo)
        var $index = $(this).index()
        // 再將點(diǎn)擊的下表對(duì)應(yīng)的content顯示出來
        $contents[$index].style.display = 'block'
        // $($contents[$index]).css('display', 'block')
        $($tab[$index]).addClass('active')
        // 更新下標(biāo)
        currentIndex = $index
      })
    </script>  
</body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末茵瘾，一起剝皮案震驚了整個(gè)濱河市礼华，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌拗秘，老刑警劉巖圣絮，帶你破解...
    沈念sama閱讀 219,490評(píng)論 6贊 508
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異聘殖，居然都是意外死亡晨雳，警方通過查閱死者的電腦和手機(jī)行瑞，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,581評(píng)論 3贊 395
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門奸腺，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人血久，你說我怎么就攤上這事突照。” “怎么了氧吐？”我有些...
    開封第一講書人閱讀 165,830評(píng)論 0贊 356
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵讹蘑，是天一觀的道長(zhǎng)。 經(jīng)常有香客問我筑舅，道長(zhǎng)座慰，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 58,957評(píng)論 1贊 295
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任翠拣，我火速辦了婚禮版仔，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘误墓。我一直安慰自己蛮粮，他們只是感情好，可當(dāng)我...
    茶點(diǎn)故事閱讀 67,974評(píng)論 6贊 393
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布谜慌。 她就那樣靜靜地躺著然想，像睡著了一般。 火紅的嫁衣襯著肌膚如雪欣范。 梳的紋絲不亂的頭發(fā)上变泄，一...
    開封第一講書人閱讀 51,754評(píng)論 1贊 307
  • 城市分裂傳說
    那天，我揣著相機(jī)與錄音恼琼，去河邊找鬼妨蛹。 笑死，一個(gè)胖子當(dāng)著我的面吹牛驳癌，可吹牛的內(nèi)容都是我干的滑燃。 我是一名探鬼主播，決...
    沈念sama閱讀 40,464評(píng)論 3贊 420
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼颓鲜，長(zhǎng)吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼表窘！你這毒婦竟也來了典予？” 一聲冷哼從身側(cè)響起，我...
    開封第一講書人閱讀 39,357評(píng)論 0贊 276
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對(duì)情侶失蹤乐严，失蹤者是張志新（化名）和其女友劉穎瘤袖，沒想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體昂验，經(jīng)...
    沈念sama閱讀 45,847評(píng)論 1贊 317
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡捂敌，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,995評(píng)論 3贊 338
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了既琴。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片占婉。...
    茶點(diǎn)故事閱讀 40,137評(píng)論 1贊 351
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖甫恩，靈堂內(nèi)的尸體忽然破棺而出逆济，到底是詐尸還是另有隱情，我是刑警寧澤磺箕，帶...
    沈念sama閱讀 35,819評(píng)論 5贊 346
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布奖慌，位于F島的核電站，受9級(jí)特大地震影響松靡，放射性物質(zhì)發(fā)生泄漏简僧。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,482評(píng)論 3贊 331
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一雕欺、第九天 我趴在偏房一處隱蔽的房頂上張望岛马。 院中可真熱鬧，春花似錦阅茶、人聲如沸蛛枚。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,023評(píng)論 0贊 22
  • 一樁弒父案脸哀，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽蹦浦。三九已至，卻和暖如春撞蜂，著一層夾襖步出監(jiān)牢的瞬間盲镶，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,149評(píng)論 1贊 272
  • 情欲美人皮
    我被黑心中介騙來泰國(guó)打工蝌诡， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留溉贿，地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,409評(píng)論 3贊 373
  • 代替公主和親
    正文 我出身青樓浦旱，卻偏偏與公主長(zhǎng)得像宇色，于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,086評(píng)論 2贊 355

推薦閱讀更多精彩內(nèi)容