Jquery Tabs Access From Urls

hello i have jquery tabs and want to access them from url using # but know know how can I full fill with it requirement is mywebsite.com/#show_page1 will show the page 1 content

Solution 1:

location.hash; will give you the hash value added in the addressbar and you can use it the way you need to. My suggestion is added below.

What seems to me you want to hightlight your link with the hash located in the browser's addressbar and respective div you want to show. If this is what you want to implement then you can try this with slight changes in the markup and js:

CSS:

.active {
    color:red;
}
#menu_containerdiv {
    display:none;
}

HTML:

<divid="nav_tabbed"><ahref="#show_page1"class='active'>Page 1</a><!--This lets you add hash in the addressbar--><ahref="#show_page2">Page 2</a></div><divid="menu_container"><divid="show_page1"style='display:block;'>Page 1</div><divid="show_page2">Page 2</div></div>

JS:

$(function () {
    // below works for hash added in the browser.var hash = location.hash;
    if(hash.length){
        $('#nav_tabbed a').removeClass('active');
        $('#menu_container div').hide();
        $('#nav_tabbed a[href*="' + hash + '"]').addClass('active');
        $('#menu_container div[id*="' + hash.slice(1) + '"]').show();
    }
    $(document).scrollTop(0);
    // below works for click of the anchors
    $('#nav_tabbed a').click(function(e){
        e.preventDefault();
        $(this).addClass('active').siblings('a').removeClass('active');
        $('#menu_container div').hide();
        $('#menu_container div[id*="'+this.getAttribute('href').slice(1)+'"]').show();
    });
});

A sample fiddle.

Solution 2:

your posts shows a little confusion on the topic. so first for explanation: there are two meanings of a # in a url, the # is a reference to the location hash. in jquery, the # is a reference to an element id.

you want to use the hash change in this case.

first of all... why do you wrap the window.load around the dom.ready event? as far, as i understood, jquery's dom ready fires when the dom is ready, jquerys window.load fires, after all images, iframes, plugins etc. have been loaded. so a dom.ready inside a window.load is kind of unnecessary ...

next: ID's have to be unique - you can't give your anchor the same id as the assigned div!

so let's get down to business - the html:

<divid="nav_tabbed"><ahref="#page1"class="activeLink">Page 1</a><ahref="#page2">Page 2</a></div><divid="menuContainer"><divid="page1"class="contentTab activeTab">123</div><divid="page2"class="contentTab">456</div></div>

we use activeLink and activeTab classes to determine which tab is currently open

the css just sets the background of the activeLink:

.activeLink {
   background-color:#1aaede;
}

the js:

$(window).load(function(){
  $(".contentTab:gt(0)").hide(); //on initial load, we hide all content tabs, despite the first one

  $("#nav_tabbed a").click(function () { //the click handler for the navigation only toggles the class to change the background color
    $(".activeLink").removeClass("activeLink");
    $(this).addClass("activeLink");
  })

  if(location.hash) //here we check, if there already is a location hash set onload and then change to the desired tab
  {
    $(".activeTab").hide();
    $(location.hash).show().addClass("activeTab");
  }

});

//our hashchange event handles the loading of the desired tabs:window.onhashchange = function () {
  if(location.hash!=null) //this checks, wether the hashchange event has been fired, due to a deletion of the hash via url
  {
    $(".activeTab").hide().removeClass("activeTab"); //hide the current tab
    $(location.hash).show().addClass("activeTab"); //show the clicked tab
  }else//and per default show the first tab
  {
    $(".activeTab").hide().removeClass("activeTab"); //hide the current tab
    $(".contentTab:first").show().addClass("activeTab"); //show the clicked tab
  }
};

http://jsfiddle.net/ex46ndg1/3/