Solved

Help With URL parameter to open tabs info

Posted on 2011-03-02
10
632 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
 

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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

895 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now