[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

Help With URL parameter to open tabs info

Posted on 2011-03-02
10
Medium Priority
?
675 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
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 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 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

649 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