Solved

Help With URL parameter to open tabs info

Posted on 2011-03-02
10
640 Views
Last Modified: 2012-05-11
Need some help with the script below. I would like to add the ability to pass a url parameter that would open one of the tabs based on ex URL#tabinfo parameter. Any help would be great thanks.
(function ($) {
    function getactTabAnc() {
        return this.find('.active>a')[0];
    }
 
    function getContentId(tabAnchorS) {
        return $(tabAnchorS).attr('href').replace('#', '');
    }
 
    function applyStyles(newActTabAnc) {
        var actTabAnc = newActTabAnc || getactTabAnc.apply(this), activeContentId = getContentId(actTabAnc);
        this.find('a').each(function () {
            var $cur = $(this), curContentId = getContentId(this);
            if (activeContentId === curContentId) {
                $cur.closest('li').addClass('active');
                $('#' + curContentId).show();
            }
            else {
                $cur.closest('li').removeClass('active');
                $('#' + curContentId).hide();
            }
        });
    }
 
    $.fn.tabs = function () {
        return this.each(function () {
            var $tabTainer = $(this);
 
            applyStyles.apply($tabTainer);
 
            $tabTainer.find('a').click(function (e) {
                console.log('clicked');
                var actTabAnc = getactTabAnc.apply($tabTainer), isActive = this === actTabAnc;
                e.preventDefault();
                if (!isActive) {
                    applyStyles.apply($tabTainer, [this]);
                }
            }); 
        });
    };
})(jQuery);


  <ul id="tabsHolder">
    <li class="active"><a href="#tabId1">Header 1</a></li>
    <li><a href="#tabId2">Header 2</a></li>
   </ul>
 
   <div id="tabId1">Content 1</div>
   <div id="tabId2">Content 2</div>

Open in new window

0
Comment
Question by:yando18
  • 7
  • 3
10 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 35024251
you can get the parameter value by name from the URL's querystring
http://stackoverflow.com/questions/901115/get-querystring-values-with-jquery

then you can set the tab related to it to active
0
 

Author Comment

by:yando18
ID: 35024276
How would you apply this to the script attached?
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 35024286
what is the relation between the parameter value and tab ?
0
Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

 

Author Comment

by:yando18
ID: 35024319
Ideally I would like the parameter to open the tab. For example http://URL.com/#tab2 would open up the second tabs content.
0
 
LVL 40

Accepted Solution

by:
gurvinder372 earned 500 total points
ID: 35024431
In that case you just need to add this line before line 2

$("#" + location.hash).parent().addClass("active");


http://www.w3schools.com/jsref/prop_loc_hash.asp
0
 

Author Comment

by:yando18
ID: 35027986
So I added that code to the second line however it does not seem to work. When I added #tabId2 to the end of the URL the tab does not open. Thoughts? Thanks again.
0
 

Author Comment

by:yando18
ID: 35031254
Does anyone have any thoughts about this issue? I could really use some advice.
0
 

Author Comment

by:yando18
ID: 35032209
So I got it to work by using:

$(window.location.hash).parent().addClass("active");
 
However I need remove the active class placed on the li by default.

0
 

Author Comment

by:yando18
ID: 35040253
So I was able to get the tabs to display using the code below, which has been altered a bit. The tabs active state changes however the tabs content is not displaying. Instead the default tabs content is displayed. Any help would be great. Thanks for your help with this.
<script type="text/javascript">
           $(document).ready(function () {
               var hash = location.href.split("#")[1];
               if (hash) {
                   $('#tabsHolder li').removeClass('active');
                   $("a[href=#" + hash + "]").parent().addClass("active");
               } else {
                   $("#tabsHolder li:first-child").addClass("active");
               }
           }); 
	</script>

Open in new window

0
 

Author Closing Comment

by:yando18
ID: 35077888
I used another solution. Thanks
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

806 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question