Get URL link name in javascript?

Question

Hi i'm trying to get my tabs works by using javascript but face some problem in changing the div that contains the content.

these are my tabs, there are more but i will show 2 for example

<li id="sub1" class="moduleTabs"><a href="#">Practice</a>
       <ul class="collapse">
           <li class="unselected"><a href="#pro1" id="t1">Principle</a></li>
           <li class="unselected"><a href="#pro2" id="t2">Basics</a></li>
       </ul>
</li>

Here is my div that contains the content

<div id="pro1" class="information">
    <h2>Principles</h2>
    <p></p>
</div>
<div id="pro2" class="information">
    <h2>Basics</h2>
    <p></p>
</div>

Here is my javascript code

$('#t1, #t2, #t3, #t4, #t5, #t6, #t7, #t8, #t9, #t10, #t11, #t12, #t13, #t14').parent('li').click(function () { 
    $(this).addClass('clicked');
    $(this).siblings().removeClass('clicked');
    //this part is to remove the content in homepage
    $('#content').hide();
    //i'm trying to get the url name #pro1 if link #t1 is click so that the div will fade in
    $(this).find('a').attr('href').fadeIn();
    $(this).siblings().find('a').attr('href').hide();
})/

The problem now i'm facing is $(this).find('a').attr('href').fadeIn() don't work. i can't get the url link (#pro1) from the tabs that is selected.

Answer 1

The thing is that $(this).find('a').attr('href') returns you a string like "#pro1", "#pro2"... and not a jQuery object directly. You have to give this string to the jQuery function to get the corresponding element.

Change this :

$(this).find('a').attr('href').fadeIn();

To

$($(this).find('a').attr('href')).fadeIn();