Bootstrap Tabbable Issue

Bootstrap Tabbable Issue

I have a html page as B.html with tab navigation. I made tabs tabbable in
my html page as below.
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
<li><a href="#tab2" data-toggle="tab">Section 2</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>Howdy, I'm in Section 2.</p>
</div>
</div>
</div>
I have another html page as A.html. In A.html page, there are 2 a tags as
T1 and T2. When i click T1, i need to redirect to B.html and show content
own to Tab 1 and When i click T2, i need to redirect to B.html and show
content own to Tab 2.
I have tried as below.
<a href="http://www.abc.com/B.html#tab1">T1</a>
<a href="http://www.abc.com/B.html#tab2">T2</a>
But this not worked. it always select tab1. How can i solve this ?