CODEWITHSUNDEEP
javascriptjqueryhtmlhyperlinkhref
user3784251
user3784251

Reputation: 520

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

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?

Upvotes: 0

Views: 227

Answers (2)

woodglue
woodglue

Reputation: 223

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

Upvotes: 0

kasdega
kasdega

Reputation: 18786

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

Upvotes: 1

Related Questions