在一個頁面點選連結跳轉至另一個頁面的選項卡tab中
阿新 • • 發佈：2019-02-04
頁面A
<body>
<a href="選項卡-練習.html?type=1">1111111111</a>
<a href="選項卡-練習.html?type=2">2222222222</a>
<a href="選項卡-練習.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 = 後面的數字 （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'}); }); // 使用傳過來的 數字 （id） 來控制該選項卡的切換 // 其實就是從頁面 A 通過 URL ？ 後面的引數 給頁面B 傳一個 index // 下面這些內容就很好理解了 $('#box1 div').css({'display':'none'}); $('input').removeClass('btn'); $('input').eq(type-1).addClass('btn'); $('#box1 div').eq(type-1).css({'display':'block'}); </script