在一个页面点击链接跳转至另一个页面的选项卡tab中

最新推荐文章于 2024-05-24 11:50:19 发布

原创最新推荐文章于 2024-05-24 11:50:19 发布 · 7.7k 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了一个简单的页面间交互案例，通过URL参数传递信息实现不同选项卡内容的显示与隐藏。具体包括HTML结构定义、CSS样式设置及jQuery脚本实现。

页面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