Question

I have 2 html page

in Page 1 there is 2 links “link1” & “link2”

in Page 2 there is also 2 links “link1” & “link2” as well as 2 <div id="pan1"> & <div id="pan2"> <div id="pan1">

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

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.

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>

here is the code for page 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;
    });
});

Answer 1

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.

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

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

Page 2 JS:

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

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

Page 2 CSS:

.switchgroup { display: none; }