javascript - Bagaimana untuk memaparkan modul yang ditentukan selepas mengklik secara luaran untuk melompat ke halaman web.

Question

Sebagai contoh, terdapat beberapa pautan ke halaman luaran yang lain:
a b c d e
Kemudian dalam halaman butiran lompat selepas mengklik, lima modul abcde semuanya dalam halaman ini yang pertama dipaparkan secara lalai, dan yang lain dipaparkan: tiada ;

Bolehkah anda melompat ke halaman butiran apabila anda mengklik pautan b pada halaman luaran dan terus memaparkan kandungan b Kecuali kandungan b, kandungan lain dipaparkan: tiada
Apabila anda mengklik pautan c pada halaman luaran, lompat ke Halaman butiran secara langsung memaparkan kandungan c Kecuali kandungan c, kandungan lain dipaparkan: tiada,

Halaman luar:

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

Halaman 1.html selepas lompatan:

<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

Tambahkan parameter pada setiap satu daripada lima pautan, contohnya

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

Kemudian nilai parameter di sebalik url dalam js halaman ini untuk memutuskan yang mana satu untuk dipaparkan dan yang mana satu untuk disembunyikan.
window.location.hash boleh mendapatkan parameter url.

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

Hanya gunakan kaedah di atas untuk menentukan pautan anda berasal, dan blok yang sepadan akan dipaparkan.

Answer 2

Hanya gunakan mata sauh untuk mencapainya

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

Saya rasa anda sepatutnya mempunyai pemahaman ringkas tentang HTML, dan kemudian mula mempelajari pembangunan bahagian hadapan yang lebih popular, seperti: (Vue.js)[https://cn.vuejs.org/], (React.js) [http:///react-china.org/], (AngularJS)[https://angularjs.org/], dsb. Oleh kerana jenis interaksi yang anda nyatakan, selain menggunakan bahasa pengaturcaraan dinamik konvensional (seperti PHP, Java, dll.), pelaksanaan bahagian hadapan masih agak menyusahkan.
Saya tidak akan menerangkan butiran di sini Anda boleh merujuk kepada soalan yang saya jawab sebelum ini: /q/10…. Keperluannya hampir sama dengan apa yang anda katakan, hanya pemindahan username，一个传递 index;
Kod anggaran adalah seperti berikut:
Berikut ialah titik utama yang diluluskan sebagai parameter:

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

1.html Dapatkan maklumat sauh masuk

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