?
Solved

Help With URL parameter to open tabs info

Posted on 2011-03-02
10
Medium Priority
?
666 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:Gurvinder Pal Singh
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:Gurvinder Pal Singh
ID: 35024286
what is the relation between the parameter value and tab ?
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

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:
Gurvinder Pal Singh earned 1500 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

Enroll in August's Course of the Month

August's CompTIA IT Fundamentals course includes 19 hours of basic computer principle modules and prepares you for the certification exam. It's free for Premium Members, Team Accounts, and Qualified Experts!

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
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…
Suggested Courses

752 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