這個問題可能太過于簡單了趴久,以致于我在網(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)注坎吻!