Изменение ссылки при перелистывании табов (bootstrap)
Здравствуйте! Я начинающий в 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пасибо за помощь заранее! |
<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>
|
Круто, спасибо большое! Есть только один нюанс.
Если на странице несколько табов, то соотвественно для каждого нужно писать отдельный код? Это можно реализовать как-то рационально, или придется вот так извращаться? :) |
| Часовой пояс GMT +3, время: 17:13. |