Solved

Help With URL parameter to open tabs info

Posted on 2011-03-02
10
661 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

696 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