Jquery 在另一个页面中显示/隐藏

Question

我有2个html页面

在第 1 页有 2 个链接“link1”和“link2”

在第 2 页还有 2 个链接“link1”和“link2”以及 2 个 <div id="pan1"> & <div id="pan2"> <div id="pan1">

& <div id="pan2">正在使用 jquery 显示/隐藏

我希望当用户点击 page1 中的 link1 时，它会转到第 2 页并显示 div"id=pan1"，当用户单击 page1 中的 link2 时，它将转到第 2 页和 div"id=pan2"会显示。

这是第 1 页的 html 代码

<ul class="linkList">
<li><a href="#pan1">Link 1</a></li>
<li><a href="#pan2">Link 2</a></li>
</ul>

这是第2页的代码

html

<ul class="linkList">
<li><a href="#pan1">Link 1</a></li>
<li><a href="#pan2">2</a></li>
</ul>
<div id="pan1" class="switchgroup" style="padding:10px; background-color:#060">div 1</div>
<div id="pan2" class="switchgroup" style="padding:10px; background-color:#936">div 2</div>

CSS

#pan1, #pan2{
    display:none;   
}

j查询

$(document).ready(function(){
    $('#pan1').show();
    $('.linkList li:first-child a').addClass('active');
    $('.linkList li a').click(function() {
        var tabDivId = this.hash;                              

        $('.linkList li a').removeClass('active');
        $(this).addClass('active');
        //console.log(tabDivId);
        $('.switchgroup').hide();
        $(tabDivId).fadeIn();
        return false;
    });
});

Answer 1

这应该让您大致了解如何操作。请注意，我尚未测试此代码，因此它可能存在一些小问题。

第 1 页 HTML:

<ul class="linkList">
    <li><a href="page2.html#pan1">Link 1</a></li>
    <li><a href="page2.html#pan2">Link 2</a></li>
</ul>

第 2 页 HTML:

<ul class="linkList">
    <li><a href="#pan1" class="panlink">Link 1</a></li>
    <li><a href="#pan2" class="panlink">2</a></li>
</ul>
<div id="pan1" class="switchgroup">div 1</div>
<div id="pan2" class="switchgroup">div 2</div>

第 2 页 JS:

$(function() {
    var anc = window.location.href.split('#')[1];
    $('#' + anc + '.switchgroup').show();

    $('a.panlink').click(function() {
        $('.switchgroup').hide();
        $($(this).attr('href')).show();
    });
});

第 2 页 CSS:

.switchgroup { display: none; }