CODEWITHSUNDEEP
javascriptjqueryhtmlhyperlinkanchor
Becky
Becky

Reputation: 2289

How to get a link to go to a specific div on another page

Say I have a link that says:

<a href="services">Services</a>

When I click on that link I want to obviously go to the services page, but what I am trying to figure out is how can I get that link to take me to a specific section on that page.

The thing is, the page I want to show a specific section, it does not show unless I hit a tab. Here is what my services page looks like. You will see if you click a tab a specific section will show up.

https://jsfiddle.net/esayoaqg/1/

If I clicked on a link referring to Service 1, I want the link to go to the services page and show the div #service1.

How can I do this?

<a href="serviceCheck1#service1">Service 1</a>
<a href="serviceCheck1#service2">Service 2</a>
<a href="serviceCheck1#service3">Service 3</a>

$(function(){

    //get the section name from hash
    var sectionName = window.location.hash.slice(1);

    //then show the section
    $('#service-display-box').show();
    //$('#' + sectionName ).show();
    $('#service' + sectionName).show().siblings().hide();
})

Upvotes: 1

Views: 4049

Answers (3)

berko
berko

Reputation: 383

You can use an anchor, but it will not set the hidden element to visible.

You'll need to add some javascript to display it. Based on the example in your fiddle, it would be as follows:

var index = location.hash.indexOf('#service');
if(index > -1) {
    var serviceId = parseInt(location.hash.substring(index));
    if(serviceId) {
        $('#service-display-box').show();
        $('#service' + serviceId).show().siblings().hide();
    }
}

Upvotes: 0

semaj0
semaj0

Reputation: 147

You can use 

<a href="blah.html#gohere">blah blah</a>

<p id="gohere">show this content</p>

and then use a show content based on scroll or window location..

Most likely will need javascript of the sorts to get it how you want.

Upvotes: 1

MarkoCen
MarkoCen

Reputation: 2324

you could use hash sign #:

<a href="services#service1">Services</a>

//services.html   
<div id="service1">...</div>

UPDATED:

if you need to auto show a section after page loaded, you could do something like:

$(function(){

    //get the section name from hash
    var sectionName = window.location.hash.slice(1);

    //then show the section
    $('#' + sectionName ).show();
})

Upvotes: 4

Related Questions