javascript - 如何在外部点击,跳转到网页后,显示指定的模块。

问题描述

问 题

比如外部别的页面有几个链接：
a b c d e
然后点击后的跳转详情页面里，abcde五个模块都在这一个页面里,默认显示第一个a,其他都是display:none;

能否在外部页面点击b链接的时候,跳转过来到详情页,直接显示b内容,除了b内容外其他内容都是display:none,
在外部页面点击c链接的时候,跳转过来到详情页,直接显示c内容,除了c内容外其他内容都是display:none,

外部页面：

<a href="1.html">a</a>
<a href="1.html">b</a>
<a href="1.html">c</a>
<a href="1.html">d</a>
<a href="1.html">e</a>

跳转后1.html的页面：

<ul class="uls">
    <li class="uls_li_checked">a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
</ul>
<div class="con">
    <div>a的内容</div>
    <div style="display:none;">b的内容</div>
    <div style="display:none;">c的内容</div>
    <div style="display:none;">d的内容</div>
    <div style="display:none;">e的内容</div>
</div>
<script>
    $('.uls li').on('click',function(){
        var aIndex = $(this).index();
        $('.con div').css({'display':'none'});
        $('.con').eq(aIndex).css({'display':'block'});
    })
</script>

解决方案

在五个链接中都加入一个参数，例如

<a href="1.html#a">a</a>
<a href="1.html#b">b</a>
<a href="1.html#c">c</a>
<a href="1.html#d">d</a>
<a href="1.html#e">e</a>

然后在这个页面的 js 里面判断 url 后面的参数，来决定哪个显示哪个隐藏。
window.location.hash 能够获取到 url 的参数。

if (window.location.hash==="#a"){
 //a 显示，其他隐藏
}

就用上面的方法来判断是从哪个链接点过来的，就能显示相应的块。

这篇关于javascript - 如何在外部点击,跳转到网页后,显示指定的模块。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！