一个页面跳转到另一个页面的tab选项卡的指定页上,该如何处理

Posted 2023-04-28

参考技术A 可以不用js用html的锚点就能轻松实习 举例： 当前页面A.html 写如下跳转链接 <a href="B.html#skip">跳转到另一个页面的指定位置</a><!--B.html是跳转到的页面名称--> 需转跳转到的页面B.html内写入 <a name="skip"></a><!--将些链接加入到你想跳转到的位置->#后面的skip你可以自己定义与下面的那个""中的对应就可以了！就能实习到指定的位置了。还有jquery实现的方法可能麻烦一些这里写一下实习思路：document.documentElement.scrollTop=$("#skipId").offset(); document.documentElement.scrollTop指的是滚动条的垂直坐标 offset() 方法返回或设置匹配元素相对于文档的偏移（位置） offset().top相对于client（页面）顶部的高度 如果知道要滚动的高度的话可以直接写document.documentElement.scrollTop=100px; 补充： 如果知道要滚动的高度的话可以直接写document.documentElement.scrollTop=100; 去掉px 参考技术B 可以不用js用html的锚点就能轻松实习 举例： 当前页面A.html 写如下跳转链接 跳转到另一个页面的指定位置 需转跳转到的页面B.html内写入追问

B.html是个tab标签，就是想跳转至指定的tab中

一个页面跳转到另一个页面的tab选项卡的指定页上

a页面是一个tab切换，b页面同样也是一个tab切换，目前想实现从a页面的tab“B”跳转的b页面的tab“B”

a页面代码：

<div class="company_department fr">
    <div class="notice_small_nav">
        <a href="#2" class="company_notice notice_nav_a">公司公告</a>
        <a href="#2" class="department_notice">部门公告</a>
    </div>
    <div class="company_content">
        <ul>
            <li><a href="notice.html#company">【公司公告喜讯】中标网再中5亿啥啥啥啥项目，呵呵 </a></li>
            <a href="notice.html#company" class="more">更多</a>
        </ul>
    </div>
    <div class="department_content">
        <ul>
            <li><a href="notice.html#department">【部门公告喜讯】中标网再中5亿啥啥啥啥项目，呵呵 </a></li>
            <a href="notice.html#department" class="more">更多</a>
        </ul>
    </div>
</div>

<script type="text/javascript">
    $(function(){
        $(".notice_small_nav a").click(function(){
            $(this).addClass("notice_nav_a").siblings().removeClass("notice_nav_a");                    
        });
        $(".company_notice").click(function(){
            $(".company_content").show();
            $(".department_content").hide();
        });//公司公告
        $(".department_notice").click(function(){
            $(".company_content").hide();
            $(".department_content").show();
        });//部门公告
    });
</script>

b页面代码（notice.html）

<script type="text/javascript">
    $(function(){
        var hash=window.location.hash||‘‘;
        if(hash==‘#company‘){
            
            $(".company_content").show();
            $(".department_Box").hide();
        }else if(hash==‘#department‘){
            $(‘.company_notice_a‘).removeClass(‘current‘);
            $(‘.department_notice_a‘).addClass(‘current‘);
            $(".company_content").hide();
            $(".department_Box").show();
        };
        $(".notice_nav_a a").click(function(){
            $(this).addClass("current").siblings().removeClass("current");                    
        });
        $(".company_notice_a").click(function(){
            $(".company_content").show();
            $(".department_Box").hide();
        });//公司公告
        $(".department_notice_a").click(function(){
            $(".company_content").hide();
            $(".department_Box").show();
        });//部门公告
        $(".company_content .selectAll").click(function(){
            $(".company_content a").removeClass(‘color‘);
        });
        $(".department_Box .selectAll").click(function(){
            $(".department_Box a").removeClass(‘color‘);
        });
    });
</script>
<div class="notice_nav_a">
    <a href="#2" class="company_notice_a current">公司公告</a>
    <a href="#2" class="department_notice_a">部门公告</a>
</div>
<!--公司公告-->
<div class="company_content">
    <table style="table-layout:fixed">
        <tr>
            <th style="width: 73%;">标题</th>
            <th style="width: 17%;">接收时间</th>
            <th style="width: 10%;">操作</td>
        </tr>
        <tr>
            <td class="iconfont td_title"><a href="#2" class="color">北京昌佳泵业有限公司北京昌佳泵业有限公司“企业信息待审核</a></td>
            <td>2018-05-08-12:00:56</td>
            <td class="look_delete">
                <a href="#2">查看</a>
            </td>
        </tr>
    </table>
    <div class="choice_page">
        <div class="choice_page_left fl">
            <input class="selectAll" type="button" value="一键已读" />
            <input type="button" value="删除已读" />
        </div>
        <div class="choice_page_right fr">
            <span class="fl">共有<i>10</i>条待办事项，</span>
            <span class="fl"><i>3</i>条未读</span>
            <div class="page_box fl">
                <a href="#2">《</a>
                <a href="#2"><</a>
                <a href="#2">1</a>
                <a href="#2">></a>
                <a href="#2">》</a>
            </div>
        </div>
    </div>
</div>
<!--部门公告-->
<div class="department_Box">
    <table style="table-layout:fixed">
        <tr>
            <th style="width: 73%;">标题</th>
            <th style="width: 17%;">接收时间</th>
            <th style="width: 10%;">操作</td>
        </tr>
        <tr>
            <td class="iconfont td_title"><a href="#2" class="color">中标网再中5亿啥啥啥啥项目，呵呵啥啥，呵呵</a></td>
            <td>2018-05-08-12:00:56</td>
            <td class="look_delete">
                <a href="#2">查看</a>
            </td>
        </tr>  
    </table>
    <!--全选&page分页-->
    <div class="choice_page">
        <div class="choice_page_left fl">
            <input class="selectAll" type="button" value="一键已读" />
            <input type="button" value="删除已读" />
        </div>
        <div class="choice_page_right fr">
            <span class="fl">共有<i>10</i>条待办事项，</span>
            <span class="fl"><i>3</i>条未读</span>
            <div class="page_box fl">
                <a href="#2">《</a>
                <a href="#2"><</a>
                <a href="#2">1</a>
                <a href="#2">></a>
                <a href="#2">》</a>
            </div>
        </div>
    </div>
</div>