在一個頁面點擊鏈接跳轉(zhuǎn)至另一個頁面的選項卡tab中

這個問題可能太過于簡單了趴久,以致于我在網(wǎng)上搜了很久才自己摸索著寫出來丸相。所以為了防止更多的新手們?yōu)榻鉀Q這個問題苦惱,特地分享出來彼棍。直接上代碼灭忠。

頁面A

<body>
    <a href="選項卡-練習(xí).html?type=1">1111111111</a>
    <a href="選項卡-練習(xí).html?type=2">2222222222</a>
    <a href="選項卡-練習(xí).html?type=3">3333333333</a>
</body>

頁面B

css
<style type="text/css">
    *{margin: 0;padding: 0;}
    #box{width: 300px;margin:100px auto;}
    input {width: 93px;height: 30px;}
    #box1{position: relative;}
    #box1 div{width: 300px;height: 200px;border: 1px solid red;position: absolute;top: 0;font-size: 20px;text-align: center;line-height: 200px;display: none;}
    #box1 .box1a{display: block;}
    .btn{background: #000;color: pink;}
</style>

html
<body>
    <div id="box">
        <input type="button" name="" value="11111" class="btn">
        <input type="button" name="" value="22222">
        <input type="button" name="" value="33333">
         <div id="box1">
            <div id="1" class="box1a">1111111111</div>
            <div id="2">222222222222</div>
            <div id="3">33333333333333</div>
         </div>
    </div>
</body>

jquery
<script>
    // 獲取 被訪問時的 url
    var ur =location.href;
    // 獲取該url  = 后面的數(shù)字 (id)
    var type=ur.split('?')[1].split("=")[1];
    // 選項卡
    $('input').click(function(event) {
        $('input').removeClass('btn');
        $(this).addClass('btn');
        $('#box1 div').css({'display':'none'});
        $('#box1 div').eq($(this).index()).css({'display':'block'});
    });
    // 使用傳過來的 數(shù)字 (id) 來控制該選項卡的切換
    // 其實就是從頁面 A 通過 URL ? 后面的參數(shù) 給頁面B 傳一個 index
    // 下面這些內(nèi)容就很好理解了
    $('#box1 div').css({'display':'none'});
    $('input').removeClass('btn');
    $('input').eq(type-1).addClass('btn');
    $('#box1 div').eq(type-1).css({'display':'block'});
</script>

是不是確實挺簡單的座硕,方法有多種弛作,有疑問可以留言,謝謝關(guān)注坎吻!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末缆蝉,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子瘦真,更是在濱河造成了極大的恐慌刊头,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,509評論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件诸尽,死亡現(xiàn)場離奇詭異原杂,居然都是意外死亡,警方通過查閱死者的電腦和手機您机,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,806評論 3 394
  • 文/潘曉璐 我一進店門穿肄,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人际看,你說我怎么就攤上這事咸产。” “怎么了仲闽?”我有些...
    開封第一講書人閱讀 163,875評論 0 354
  • 文/不壞的土叔 我叫張陵脑溢,是天一觀的道長。 經(jīng)常有香客問我赖欣,道長屑彻,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,441評論 1 293
  • 正文 為了忘掉前任顶吮,我火速辦了婚禮社牲,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘悴了。我一直安慰自己搏恤,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,488評論 6 392
  • 文/花漫 我一把揭開白布湃交。 她就那樣靜靜地躺著熟空,像睡著了一般。 火紅的嫁衣襯著肌膚如雪巡揍。 梳的紋絲不亂的頭發(fā)上痛阻,一...
    開封第一講書人閱讀 51,365評論 1 302
  • 那天,我揣著相機與錄音腮敌,去河邊找鬼阱当。 笑死,一個胖子當(dāng)著我的面吹牛糜工,可吹牛的內(nèi)容都是我干的弊添。 我是一名探鬼主播,決...
    沈念sama閱讀 40,190評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼捌木,長吁一口氣:“原來是場噩夢啊……” “哼油坝!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,062評論 0 276
  • 序言:老撾萬榮一對情侶失蹤澈圈,失蹤者是張志新(化名)和其女友劉穎彬檀,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體瞬女,經(jīng)...
    沈念sama閱讀 45,500評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡窍帝,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,706評論 3 335
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了诽偷。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片坤学。...
    茶點故事閱讀 39,834評論 1 347
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖报慕,靈堂內(nèi)的尸體忽然破棺而出深浮,到底是詐尸還是另有隱情,我是刑警寧澤眠冈,帶...
    沈念sama閱讀 35,559評論 5 345
  • 正文 年R本政府宣布飞苇,位于F島的核電站,受9級特大地震影響洋闽,放射性物質(zhì)發(fā)生泄漏玄柠。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,167評論 3 328
  • 文/蒙蒙 一诫舅、第九天 我趴在偏房一處隱蔽的房頂上張望堪藐。 院中可真熱鬧逞盆,春花似錦振惰、人聲如沸捷凄。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,779評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽匾浪。三九已至,卻和暖如春卷哩,著一層夾襖步出監(jiān)牢的瞬間蛋辈,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,912評論 1 269
  • 我被黑心中介騙來泰國打工将谊, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留冷溶,地道東北人。 一個月前我還...
    沈念sama閱讀 47,958評論 2 370
  • 正文 我出身青樓尊浓,卻偏偏與公主長得像逞频,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子栋齿,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,779評論 2 354

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

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,110評論 25 707
  • 的人
    yanxiaoying閱讀 229評論 0 0
  • 怎么說呢苗胀?我們常對畫面感記憶猶新襟诸,是因為他比語言來的更有說服里,我們看電視劇基协,感動于什么歌亲?就是演員帶給我們的畫面...
    合肥李風(fēng)麗閱讀 244評論 0 0
  • 光陰荏苒,倏忽又是一年中秋堡掏。 年年歲歲月相似应结,歲歲年年人不同刨疼。不同的又豈止是人泉唁?人不能兩次踏進同一條河流,萬事萬物...
    栗豐閱讀 181評論 0 0
  • 越是兇猛的動物揩慕,小時候越可愛亭畜,這就是所謂反萌差嗎?
    墻邊的維克多閱讀 363評論 0 1