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?

i guess you could use html anchor or detect the position of the div and then scroll your screen to the correct position — bovino Marcelo Bezerra, Feb 21 '15 at 05:50
@MarceloBezerra Not scrolling i need. When i click a div the particular div only be visible all other are hidden. So, from other page if i click a link (using `href`) it should only show the particular div what i requested, all others should be hidden. for ex, `` it should show only the div `c` all others should be hidden. — user3784251, Feb 21 '15 at 05:53
this may help you out [possibly](http://stackoverflow.com/a/3309520/2749470) — Bhargav Modi, Feb 21 '15 at 05:54

score 1 · Accepted Answer · edited May 23 '17 at 12:22

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

score 0 · Answer 2 · answered Feb 21 '15 at 08:13

0

You can read location.hash when pageA loads - in your jQuery load($) function

answered Feb 21 '15 at 08:13

woodglue

223
2
11

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

2 Answers2