<div id="example">
<ul>
<li><a href="ahah_1.html"><span>Content 1</span></a></li>
<li><a href="ahah_2.html"><span>Content 2</span></a></li>
<li><a href="ahah_3.html"><span>Content 3</span></a></li>
</ul>
</div>
<ul class="tabs">
<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="pill-content">
<div class="active" id="home">...</div>
<div id="profile">...</div>
<div id="messages">...</div>
<div id="settings">...</div>
</div>
<script>
$(function () {
$('.tabs').tabs()
})
</script>
You can use e.target and e.relatedTarget to get your active tab and previous tab objects. I messed around for a bit withe.target and e.relatedTarget, and found out that e.target.toString() returns http://____/#targetAnchor.
The Code
With that insight, I hacked around my code to get what I wanted - a JQueryUI-like dynamic loading of content of tabs. True to what a statistician does, I use regex and string manipulation to make tabs load pages when it is actie. It's nothing revolutionary, I didn't patch Twitter Bootstrap - it was just to get my project working (in all browsers except IE. FML). The reason why I am positing this is because I tried looking for an example to do this, but couldn't find one. Hope this finds you. This code below is used in the last bit of the page, when everything is ready and loaded, to initialize all the things.
<script>
$(document).ready(function() {
$('#tab1').load('/tab1Content', function() {
$('.tabs').tabs(); //reinitialize tabs
});
$('.tabs').bind('change', function(e) {
var pattern=/#.+/gi //set a regex pattern (all the things after "#").
var contentID = e.target.toString().match(pattern)[0]; //find pattern
$(contentID).load('/'+contentID.replace('#',''), function(){
$('.tabs').tabs(); //reinitialize tabs
});
});
});
</script>
Notes
Somethings to note:- JQuery is obviously required
'#tab1'is the id of pill-content (look at 2nd codebox)'/tab1Content'is the location of where your content will be- The targetAnchor must be the same or similar to your location (mine was: #list and /list). Feel free to play around
e.target.toString() returns http://localhost/#targetAnchor. And I knew that I don't have URLs like http://localhost/#targetAnchor/somethingElse so I can rather confidently use that regex. I would recommend you write your own regex.