javascript – So zeigen Sie das angegebene Modul an, nachdem Sie extern geklickt haben, um zur Webseite zu springen.

Question

Zum Beispiel gibt es mehrere Links zu anderen externen Seiten:
a b c d e
Nach dem Klicken werden auf der Seite mit den Sprungdetails alle fünf abcde-Module angezeigt. Das erste a wird standardmäßig angezeigt, die anderen werden angezeigt: keine ;

Können Sie zur Detailseite springen, wenn Sie auf Link b auf einer externen Seite klicken und den Inhalt von b direkt anzeigen? Mit Ausnahme von Inhalt b werden keine anderen Inhalte angezeigt.
Wenn Sie auf Link c auf einer externen Seite klicken, springen Sie zu Auf der Detailseite werden C-Inhalte direkt angezeigt. Mit Ausnahme von C-Inhalten werden andere Inhalte angezeigt: keine,

Externe Seite:

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

Die Seite von 1.html nach dem Sprung:

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

Answer 1

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

<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 显示，其他隐藏
}

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

Answer 2

用锚点实现就好了

// 外部页面：
<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>
跳转后1.html的页面：

<ul class="uls">
    <li id="a" class="uls_li_checked">a</li>
    <li id="b">b</li>
    <li id="c">c</li>
    <li id="d">d</li>
    <li id="e">e</li>
</ul>
<p class="con">
    <p>a的内容</p>
    <p style="display:none;">b的内容</p>
    <p style="display:none;">c的内容</p>
    <p style="display:none;">d的内容</p>
    <p style="display:none;">e的内容</p>
</p>

Answer 3

我觉得你对 HTML 简单了解一下，然后着手学习目前比较流行的前端开发吧，如：(Vue.js)[https://cn.vuejs.org/]、(React.js)[http://react-china.org/]、(AngularJS)[https://angularjs.org/]等。因为像你说的这种交互，除了使用常规的动态编程语言(如：PHP、Java等)，前端实现起来还是比较麻烦的。
深了就不多说了，你可以参考我以前回答的一个问题：/q/10...。他的需求和你说的很像，只是一个传递 username，一个传递 index;
大概代码如下：
这里是有锚点作为参数传递：

<a href="1.html#1">a</a>
<a href="1.html#2">b</a>

1.html 获取传入的锚点信息

<script type="test/javascript">
// $(function(){ ··· }) 等于 $(document).ready();
$(function(){
    'use strict';
    
    // 初始化变量
    var useIndex = window.location.hash, // String:'#N',
        $tabNavItem = $('.uls > li'),
        tabNavItemActive = 'uls_li_checked',
        $tabContItem = $('.con').children();;
        
    // 修正参数 - W.L.hash 获取的是 `#string` 的格式，我们只需要 # 后面的内容
    useIndex = useIndex ? parseInt(useIndex.substr(1)) : 0;
    
    // 初始化自动显示
    flip( useIndex );
    
    // 手动切换
    tabNavItem.on('click.app',function(e){
        flip( $(this).index() );
    })
    
    // 切换方法
    function flip(index){
        // 全部移除选中 - 选择当前索引的条目 - 添加选中
        $tabNavItem.removeClass(tabNavItemActive)
        .eq(index)
        .addClass(tabNavItemActive);
        
        // 隐藏已显示条目 - 选择当前索引他条目 - 显示
        $tabContItem.hide()
        .eq(index)
        .show();
    }
    
});
</script>