Изменение ссылки при перелистывании табов (bootstrap)

[Atom686]

Здравствуйте! Я начинающий в javascript, сломал уже всю голову над решением следующей задачи.
Есть табы на bootstrap, их несколько на странице.
Разметка у них такая:

<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a href="#home">Home</a></li>
  <li><a href="#profile">Profile</a></li>
  <li><a href="#messages">Messages</a></li>
  <li><a href="#settings">Settings</a></li>
</ul>
 
<div class="tab-content">
  <div class="tab-pane active" id="home">...</div>
  <div class="tab-pane" id="profile">...</div>
  <div class="tab-pane" id="messages">...</div>
  <div class="tab-pane" id="settings">...</div>
</div>

<a href="#ссылка, котрую нужно менять">Заказать</a>

Под каждым блоком табов есть ссылка, нужно чтобы она изменяла свой адрес в зависимости от выбранной вкладки.
Табы в бутстрепе дают событие shown, но как это использовать никак не могу сообразить.
http://twitter.github.com/bootstrap/...ript.html#tabs
Cпасибо за помощь заранее!

[Deff]

<style>
* {
margin:0;
}
#myTab {
 margin-right:23px;
 display:inline-block;
 vertical-align:top;
}
#myTab li{
 border:transparent solid 1px;
}
#myTab li.active{
 border-color:red ;
}
.tab-content {
 display:inline-block;
 border:red solid 1px;
 padding:12px;
}
.tab-pane {
 display:none;
}
.tab-pane.active {
 display:block;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function TabSet(a,b){
   var nav = $(a);
   var tabcont=$(b);
   nav.find('a').click(function(){
      nav.removeClass('active');
      $(this).parent().addClass('active');
      $('.tab-pane',tabcont).removeClass('active');
      var activ = tabcont.find('#'+this.href.split('#')[1]);
      var Url = activ.addClass('active').attr('data-url');
      tabcont.find(".href").attr('href',Url);
  });
}

$(document).ready(function(){
 TabSet( "#myTab>li",".tab-content")
});
</script>


<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a href="#home">Home</a></li>
  <li><a href="#profile">Profile</a></li>
  <li><a href="#messages">Messages</a></li>
  <li><a href="#settings">Settings</a></li>
</ul>


<div class="tab-content">
  <div class="tab-pane active" id="home" data-url="http://home">...home</div>
  <div class="tab-pane" id="profile" data-url="http://profile">...profile</div>
  <div class="tab-pane" id="messages" data-url="http://messages">...messages</div>
  <div class="tab-pane" id="settings" data-url="http://settings">...settings</div>
<br>
<a class="href" href="http://home#ссылка, котрую нужно менять">Заказать</a>
</div>

[Atom686]

Круто, спасибо большое! Есть только один нюанс.
Если на странице несколько табов, то соотвественно для каждого нужно писать отдельный код? Это можно реализовать как-то рационально, или придется вот так извращаться?