javascript - How to display the specified module after clicking externally to jump to the web page.

Question

For example, there are several links to other external pages:
a b c d e
Then in the jump details page after clicking, the five abcde modules are all in this page. The first a is displayed by default, and the others are is display:none;

Is it possible to jump to the details page when clicking the b link on the external page and directly display the b content. Except for the b content, other contents are display: none.
When clicking the c link on the external page, Jump to the details page and display c content directly. Except for c content, other contents are display:none,

External page:

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

The page of 1.html after the jump:

<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

Add a parameter to each of the five links, for example

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

Then judge the parameters behind the url in the js of this page to decide which one to display and which one to hide.
window.location.hash can get the parameters of the url.

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

Just use the above method to determine which link you came from, and the corresponding block will be displayed.

Answer 2

Just use anchor points to achieve it

// 外部页面：
<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

I think you should have a brief understanding of HTML, and then start learning the more popular front-end development, such as: (Vue.js)[https://cn.vuejs.org/], (React.js)[http:/ /react-china.org/], (AngularJS)[https://angularjs.org/], etc. Because of the kind of interaction you mentioned, in addition to using conventional dynamic programming languages ​​(such as PHP, Java, etc.), the front-end implementation is still relatively troublesome.
I won’t go into details here. You can refer to a question I answered before: /q/10…. His needs are very similar to what you said, just one pass username, one pass index;
The approximate code is as follows:
Here is the anchor point passed as a parameter:

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

1.html Get the incoming anchor information

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