javascript - Bagaimana untuk memaparkan modul yang ditentukan selepas mengklik secara luaran untuk melompat ke halaman web.
伊谢尔伦
伊谢尔伦 2017-05-31 10:39:54
0
3
830

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>
伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳,潜力无限,来学PHP伐。

membalas semua(3)
刘奇

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.

过去多啦不再A梦

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>
左手右手慢动作

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>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan