html模拟点击（页面跳转新页面对应的tab）

最新推荐文章于 2024-08-05 05:18:27 发布

性野喜悲

最新推荐文章于 2024-08-05 05:18:27 发布

阅读量3k

点赞数 1

分类专栏： html+css

本文链接：https://blog.csdn.net/leng0920/article/details/103278219

版权

html+css 专栏收录该内容

113 篇文章 1 订阅

订阅专栏

//被跳转页面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>模拟点击目标页</title>
    </head>
    <style type="text/css">
        .nav-panel{
            display: flex;
            align-items: center;
            justify-content: flex-start;
        }
        .nav-subitem{
            width: 80px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            font-size: 16px;
            border: 1px solid red;
            margin:  0 24px 16px 0;
            color: red;
            cursor: pointer;
        }
        .nav-active{
            background: red;
            color: #fff;
        }
        .content-subitem{
            width: 200px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            color: #fff;
            font-size: 24px;
            display: none;/* 默认隐藏 */
            
        }
        .content-block{
            display: block;/* 需要显示的元素使用该class */
        }
    </style>
    <body>
        <div class="nav-panel">
            <div class="nav-subitem nav-active">菜单一项</div>
            <div class="nav-subitem">菜单二项</div>
            <div class="nav-subitem">菜单三项</div>
        </div>
        <div class="content-panel">
             <div class="content-subitem content-block" style="background: red">
                 第一页面内容
             </div>
             <div class="content-subitem" style="background: blue;">
                 第二页面内容
             </div>
             <div class="content-subitem" style="background: #7fb80e;">
                 第三页面内容
             </div>
        </div>
    </body>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript">
        // 点击tab切换页面
        $(".nav-panel .nav-subitem").on("click",function(){
            $(this).addClass("nav-active").siblings().removeClass("nav-active");
            $(".content-panel .content-subitem").eq($(this).index()).show().siblings().hide();
        })
        $(function(){
            // getQueryVariable函数用于获取url携带参数
            var type = getQueryVariable('type');
            console.log(type)
            if(type){
                $(".nav-panel .nav-subitem").eq(type).click();
            }
        })
        // 方式一（正则表达式）
        // variable为url参数的key
        function getQueryVariable(variable)
        {
            // 构造一个含有variable（目标）参数的正则表达式对象
            var reg = new RegExp("(^|&)"+ variable +"=([^&]*)(&|$)");
            //获得了当前链接的中?号后的参数（匹配目标参数）
            var r = window.location.search.substr(1).match(reg);
            console.log(r)
            //返回目标参数
            // unescape() 函数可对通过 escape() 编码的字符串进行解码。
            if(r!=null)return  unescape(r[2]); return null;
        }
        //方式二（使用js 获取参数值）
        // function getQueryVariable(variable) {    //variable为url参数的key
        // var query = window.location.search.substring(1); //获取url中"?"符后的字串，截取？后的字符串
        // var vars = query.split("&");  //字符串按照&拆分
        // for(var i = 0; i < vars.length; i++) {
        // var pair = vars[i].split("=");  //获取每一个参数
        // if(pair[0] == variable) {
        // return pair[1];   //获取参数值
        // }
        // }
        // return(false);
        // }

    </script>
</html>

//点击跳转页面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>点击跳转页</title>
    </head>
    <style type="text/css">
        .page{
            display: inline-block;
            width: 120px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background: #ddd;
            color: red;
            font-size: 16px;
            text-decoration: none;
            margin-right: 24px;
        }
    </style>
    <body>
        <a class="page" href="target_page.html?type=0">跳转第一页面</a>
        <a class="page" href="target_page.html?type=1">跳转第二页面</a>
        <a class="page" href="target_page.html?type=2">跳转第三页面</a>
    </body>
</html>