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