to reach (ie. to unhide) a particular div using 'href' from other page

Question

There is a pageA with 3 div(consider). also i'm having a link in another page. when users clicks the link they have to reach the 3rd div in pageA. How to do this?

In my code all div are hidden except the one which is selected at that time. so there is no need for scrolling.

Demo

HTML:(PageA.html)

    <div id="mws-navigation">
        <ul id="link">
            <li class="" data-related="a" id="a1"><a href="#a"><i class="icon-book"></i>A</a></li>
            <li data-related="b" class="" id="b1"><a href="#b"><i class="icon-search"></i>B</a></li>
          <li data-related="c" class="" id="c1"><a href="#c"><i class="icon-calendar"></i>C</a></li>    
        </ul>
    </div>         
<!-- Main Container Start -->
<div id="mws-container" class="clearfix">
    <!-- Inner Container Start -->
        <div id="a" class="tab">
            aaaa
        </div>
        <div id="b" class="tab"> 
            bbbb
        </div>
        <div id="c" class="tab"> 
           cccc
        </div>
</div>

page B.html:

<a href="PageA.html#c">vvv</a>// this link will be in other page(to reach C)

// what i have to give in herf="" to reach that particular div

JQuery:

$(function()
    {

            $('#link li').removeClass('actif');
            $(this).find('li').addClass('actif');
            $('.tab').hide();
            $('#a').show();
            document.getElementById('a1').className='active';
            $('#link li').click(function(e){
            $('#link li').removeClass('actif');
            $(this).find('li').addClass('actif');
            $('.tab').hide();
            $('#'+$(this).attr('data-related')).show();
            e.preventDefault();
});
    });

Any suggestion?

Answer 1

Ok so I think you're saying you want to show and focus on a particular element based on what a user has clicked on coming from another page.

On pageB add a parameter to your querystring in your hrefs like so:

<a href="PageA.html?showdiv=c">vvv</a>

If you have server side access - java, php or something then I would suggest using that to handle the query string and add a class to your div on pageA

<div id="c" class="tab showAndFocus"> cccc</div>

var myElementToShow = $(".showAndFocus");
myElementToShow.show();
myElementToShow.focus();

OR

However, if you only have jquery/javascript to do this (i.e. there is no server side to help you work with the query string) then you can get access to the query string parameters as discussed here

var urlParams;
(window.onpopstate = function () {
    var match,
       pl     = /\+/g,  // Regex for replacing addition symbol with a space
       search = /([^&=]+)=?([^&]*)/g,
       decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
       query  = window.location.search.substring(1);

       urlParams = {};
       while (match = search.exec(query))
           urlParams[decode(match[1])] = decode(match[2]);
})();

Once you have the query string you can grab the div you want to show pretty easily...

var myElementToShow = $("#"+urlParams.showdiv);
myElementToShow.show();
myElementToShow.focus();