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

Question

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

In the page you provided everything works fine. When you click the link to the section it follows it, that is hides all the sections and shows the one specified in link. Then, the default links behaviour navigates to the top of the section. Do you want it to __not__ navigate but just show the section? — matewka, Oct 28 '13 at 09:07

Rohan Kumar · Accepted Answer · 2013-10-28T09:23:29.080

1

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

edited Oct 28 '13 at 09:23

answered Oct 28 '13 at 08:53

Rohan Kumar

40,431
11
76
106

@user2913707 I didn't find `showSection function` in your page. Check my `answer` once again. – Rohan Kumar Oct 28 '13 at 09:22
Hi Rohan Kumar, Now working fine, thanks you so much – user2913707 Oct 28 '13 at 09:40
Page is vertically scrolling when click on the tab, how to fix. thanks – user2913707 Oct 29 '13 at 02:50
How to fix the page scroll to top when clicking different tabs in jquery vertical tab, demo link: http://www.bajistech.info/tiltindicators.html#TiltWatch-Plus1 – user2913707 Nov 19 '13 at 03:15

score 0 · Answer 2 · edited May 23 '17 at 10:25

0

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

edited May 23 '17 at 10:25

Community

1
1

answered Oct 28 '13 at 08:52

Camathon

514
2
5
22

vladzam · Answer 3 · 2013-10-28T08:58:35.113

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';

score 0 · Answer 4 · answered Oct 28 '13 at 08:53

0

try this code with demo

page will scroll to specific section on clicking the section title

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

answered Oct 28 '13 at 08:53

meer

932
1
10
11

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

4 Answers4