Twitter Bootstrap：頂部欄刪除內容div

Question

我曾經有Twitter Bootstrap選項卡。

我可以使用以下方法切換div內容：

 <ul class="tabs" data-tabs="tabs" >
                <li class="active"><a href="#home">Home</a></li>
                <li><a href="#files">Files</a></li>
                <li><a href="#help">Help</a></li>


       </ul>

    <script type="text/javascript">

    $('#.tabs').bind('change', function (e) {
        e.target // activated tab
        e.relatedTarget // previous tab
    })
</script>

現在，我想將此功能移至菜單欄：

<div class="topbar">
      <div class="topbar-inner">
        <div class="container-fluid">
          <ul class="nav">
            <li><a class="add_folder">Add</a></li>
            <li><a class="remove_folder">Remove</a></li>
            <li><a class="rename_folder">Rename</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>

          </ul>
          <p class="pull-right">Logged in as <a href="#">username</a></p>
        </div>
      </div>
    </div>

更新：我設法做到以下幾點：

$(document).ready(
function()
{
topbarLinks = $(".nav li");
if (topbarLinks.length > 0)
{
topbarLinks.attr({"onclick" : "topbarItem_OnClick()"});
}

});

function topbarItem_OnClick(event, data)
{
alert("bla");
};

Whay是交換內容的最簡單方法？

TIA

Answer 1

最后，我使用了：

$(document).ready(
function()
{
topbarLinks = $(".nav li a").attr({"onclick" : "topbarItem_OnClick(this.href)"});
});

function topbarItem_OnClick(href)
{

//$(".pill-content").find('*[style]').each(function(index){
//    this.hide();
//});

$(".pill-content>div").hide();
var indexOfHash = href.indexOf("#");
var selected = href.substring(indexOfHash);
$(selected).show();


};