jq简单实现点击按钮跳转页面到指定tab内容

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/caiyongshengCSDN/article/details/80089810

A页面

<div>

    <a href="概算分析报告-详情.html?type=1"  target="view_window" class="btn">查看详情 ></a>    //按钮

    //给a标签添加要跳转的链接，并在链接后面拼接 ? type=1

    <a href="概算分析报告-详情.html?type=2"  target="view_window" class="btn">查看详情 ></a> 

    <a href="概算分析报告-详情.html?type=3"  target="view_window" class="btn">查看详情 ></a>

    <a href="概算分析报告-详情.html?type=4"  target="view_window" class="btn">查看详情 ></a>  

    <a href="概算分析报告-详情.html?type=5"  target="view_window" class="btn">查看详情 ></a> 

    <a href="概算分析报告-详情.html?type=6"  target="view_window" class="btn">查看详情 ></a> 

</div>

扫描二维码关注公众号，回复： 3868132 查看本文章

B页面

<div class="catalog-tab pdl30">
         <ul>
               <li class="home"><a href="#">报告首页</a></li>
               <li class="li active"><a href="#">项目工程总费分析</a></li>
               <li class="li"><a href="#">分部分项工程费分析</a></li>
               <li class="li"><a href="#">工料机分析</a></li>
               <li class="li"><a href="#">同期经济指标分析</a></li>
               <li class="li"><a href="#">综合指标差异分析</a></li>
         </ul>

 </div>

<div class="report-box">

    <div class="tab-item">1 </div>

    <div class="tab-item"> 2</div>

    <div class="tab-item"> 3</div>

    <div class="tab-item"> 4</div>

    <div class="tab-item"> 5</div>

    <div class="tab-item"> 6</div>

 </div>

B页面js：

        var url =location.href;         //获取url
        var typeNum=url.split('?')[1].split("=")[1];     //截取链接后type的值
         $.each($('.catalog-tab  li'),function (i) {
             $('.catalog-tab  li').eq(typeNum-1).addClass('active').siblings().removeClass('active');    //B页面tab选中样式
             $('.report-box  .tab-item').eq(typeNum-1).show().siblings().hide();  //B页面tab对应内容选中样式
         });