Jquery显示/隐藏在另一个页面 [英] Jquery show/hide in another page

问题描述

我有2个html页面

在第1页有2个链接link1 link2

in Page 1 there is 2 links "link1" & "link2"

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

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

& <div id="pan2"> is working as show/hide with jquery

点击link1在page1它会去到第2页和divid = pan1将显示，当用户点击link1在page1它将转到第2页和divid = pan2将显示。

I want when user click on the link1 in page1 it will go to page 2 and div"id=pan1" will show and when user click on the link2 in page1 it will go to page 2 and div"id=pan2" will show.

这里是第1页的html代码

here is the html code for page 1

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

jquery

$(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;
    });
});

推荐答案

它。请注意，我没有测试此代码，因此可能会遇到一些小问题。

This should give you a general idea of how to do it. Please note I haven't tested this code so it might have some minor issues.

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>

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>

JS：

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

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

CSS：

.switchgroup { display: none; }

这篇关于Jquery显示/隐藏在另一个页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！