获取JavaScript中的URL链接名称？

嗨，我正在尝试通过使用javascript使我的标签正常工作，但在更改包含内容的div时会遇到一些问题。

这些是我的标签，还有更多，但我将显示2个示例

<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>

这是包含内容的我的div

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

这是我的JavaScript代码

$('#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();
})/

我现在面临的问题是$(this).find('a').attr('href').fadeIn()行不通。我无法(#pro1)从所选标签中获取网址链接。