to (reach) 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?

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

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

Need help.

I hope you will find answer to your question in this link http://stackoverflow.com/questions/9652944/jquery-page-scroll-to-different-page — bittu, Feb 19 '15 at 17:54
@bittu that doesn't answer mine. Since in my code all div are hidden except the one which is selected. Any other suggestion? — user3784251, Feb 19 '15 at 18:19
i think the concept will be same which i have provided in the link just remove the scroll part — bittu, Feb 19 '15 at 20:47

score 0 · Answer 1 · answered Feb 19 '15 at 18:25

0

you need to set your page body a bit longer than the browser viewport to enable scrolling and use the following jquery funtion:

$("body, html").animate({ 
            scrollTop: $('#mws-container').offset().top 
        }, 600);

see jsfiddle

answered Feb 19 '15 at 18:25

imnancysun

612
8
14

This is not the answer i need. I dont want to scroll. I quoted a text in my question `In my code all div are hidden except the one which is selected at that time` So when i click the link in pageB.html. It should reach pageA.html and show only `
` with id "c".
– user3784251 Feb 19 '15 at 18:29

score 0 · Answer 2 · answered Feb 19 '15 at 18:36

If the destination has to be in the href, you can do this with Anchor tags :

See Jsfiddle Here

The line<br> lines are just to get it to scroll so it's bigger than the window. The #a #b #c etc in the href anchor links at the top make the browser scroll to the relevant anchor within the page.

If you wanted to open a div for display as well, you can use window.location.search to get the part after the #, and ise that as an id to open the relevant div. It's probably easiest to do this using JQuery.

Code:

<!-- these links could be on another page so the href would be like <a href="page.html#a"></a>

            <a href="#a">Go to One</a> |
            <a href="#b">Go to Two</a> |
            <a href="#c">Go to Three</a>




<div>
    <a name="a"></a> <!-- no title text in the anchor means this doens't appear, it just acts as a placeholder to scroll to when a loink is clicked with destination href=something#a -->
    One<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
</div>
<div>
    <a name="b"></a>
    TWO<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
        Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
        Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
        Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
</div>
    <div>
    <a name="c"></a>
    THREE<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
          Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
          Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
          Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
</div>

This is not the answer i need. I dont want to scroll. I quoted a text in my question In my code all div are hidden except the one which is selected at that time So when i click the link in pageB.html. It should reach pageA.html and show only
with id "c". — user3784251, Feb 19 '15 at 18:37
Ah so by "have to reach the 3rd div" you mean the div has to open ? ie, unhide ? — user2808054, Feb 19 '15 at 18:40

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

2 Answers2