CODEWITHSUNDEEP
javascriptjqueryhtml
user2913707
user2913707

Reputation: 33

how to create a link to a specific tab? (jquery)

function showSection( sectionID ) {
    $('div.section').css( 'display', 'none' );
    $('div'+sectionID).css( 'display', 'block' );
}
$(document).ready(function(){
    if (
        $('ul#verticalNav li a').length &&
        $('div.section').length
    ) {
        $('div.section').css( 'display', 'none' );
        $('ul#verticalNav li a').each(function() {
            $(this).click(function() {
                showSection( $(this).attr('href') );
            });
        });
        $('ul#verticalNav li:first-child a').click();
    }
});

<ul id="verticalNav">
    <li><a href="#section1">Section I</a></li>
    <li><a href="#section2">Section II</a></li>
    <li><a href="#section3">Section III</a></li>
</ul>


    <div id="sections">
        <div class="section" id="section1">
            <p>Some content specific to this section...</p>
        </div>
        <div class="section" id="section2">
            <img src="#" alt="BADGER" />
        </div>
        <div class="section" id="section3">
            <img src="#g" alt="SNAKE" />
        </div>
    </div>

I have to create specific link for each tab example index.html#section1 , index.html#section2

Upvotes: 0

Views: 2233

Answers (4)

Rohan Kumar
Rohan Kumar

Reputation: 40639

Try this,

if(window.location.hash)
{
    showSection( window.location.hash);// to get the div id
}

Full Code

function showSection( sectionID ) {
    $('div.section').css( 'display', 'none' );
    $('div'+sectionID).css( 'display', 'block' );
}
$(document).ready(function(){

    if (
        $('ul#verticalNav li a').length &&
        $('div.section').length
    ) {
        $('div.section').css( 'display', 'none' );
        //$('ul#verticalNav li a').each(function() { // no need for each loop
        $('ul#verticalNav li a').click(function() { // Use $('ul#verticalNav li a').click
            showSection( $(this).attr('href') );
        });
        //});
        if(window.location.hash) // if hash found then load the tab from Hash id
        {
           showSection( window.location.hash);// to get the div id
        }
        else // if no hash found then default first tab is opened
        {
            $('ul#verticalNav li:first-child a').click();
        }
    }
});

Upvotes: 1

vladzam
vladzam

Reputation: 5908

You could put each section inside an anchor tag with that specific name. For example, for section1 you would do so:

<a name="section1">
    <div class='section" id="section1">
        <p> Some content specific to this section...</p>
    </div>
</a>

Then, you could simply reference that section like this (from the same page):

<a href="#section1">Click me to get to section1!</a>

If you were to try and reference section1 (which would be let's say on index.html) from another page like about.html, you would simply have the following anchor element:

<a href="index.html#section1">Clicke me to navigate from about.html to section1 on index.html<a>

Also, you could try using window.location.hash [it is supported in all major browsers] as follows:

window.location.hash = 'section1';

Upvotes: 0

meer
meer

Reputation: 982

try this code with demo

page will scroll to specific section on clicking the section title

http://css-tricks.com/snippets/jquery/smooth-scrolling/

Upvotes: 0

Camathon
Camathon

Reputation: 524

This has been asked many times, should be easy to find with some googling.

 $( "#tabs" ).tabs({
        select: function(event, ui) {                   
            window.location.hash = ui.tab.hash;
        }
    });

Answered here jQuery UI tabs, update url when clicking on a different tab

Upvotes: 0

Related Questions