mui-bar-tab组件 弹出框 弹出效果的改进

我想实现这种弹出框效果，就是在点击其他mui-tab-item时，直接关闭上一个mui-bar-popover的同时，并弹出当前的mui-bar-popover。参考http://m.to8to.com/xiaoguotu/list-h2s8i0

代码如下：
html

  <nav class="mui-bar mui-bar-tab head-cats" style="bottom: auto; ">   
   <a class="mui-tab-item mui-active" href="#70e9661152cdf369ea64ba27f56c0d6c">风格 <i class="icon-angle-down"></i></a>   
   <a class="mui-tab-item" href="#1a1d03f3dc069b12fc2b34bbbcc8c7d2">空间 <i class="icon-angle-down"></i></a>   
   <a class="mui-tab-item" href="#06f7b17112897640a9815a5e0905f548">户型 <i class="icon-angle-down"></i></a>   
   <a class="tab-item link-tab-item" href="?q=photo/cats">更多...</a>   
  </nav>   
  <div id="70e9661152cdf369ea64ba27f56c0d6c" class="mui-popover mui-bar-popover head-cat-cont mui-active" style="display: block; top: 107px; left: 5px;">   
   <div class="mui-popover-arrow" style="left:60px"></div>   
  </div>   
  <div id="1a1d03f3dc069b12fc2b34bbbcc8c7d2" class="mui-popover mui-bar-popover head-cat-cont mui-active" style="display: block; top: 107px; left: 5px;">   
   <div class="mui-popover-arrow" style="left:60px"></div>   
  </div>   
  <div id="06f7b17112897640a9815a5e0905f548" class="mui-popover mui-bar-popover head-cat-cont mui-active" style="display: block; top: 107px; left: 5px;">   
   <div class="mui-popover-arrow" style="left:60px"></div>   
  </div>   

js

$(function ($) {  
    mui('.mui-bar-tab').off('tap', '.mui-tab-item');  

    mui('.mui-bar-tab').on('tap', '.mui-tab-item', function () {  
        document.location.href = this.href;  

        var thisId = $(this).attr('href');  
        var thisPopover = $(thisId);  

        var siblingTabs = $(this).siblings('.mui-tab-item');  
        siblingTabs.removeClass('mui-active');  
        $(this).toggleClass('mui-active');  

        var siblingPopover = thisPopover.siblings('.mui-bar-popover');  
        siblingPopover.removeClass('mui-active');  
        thisPopover.toggleClass('mui-active');  
    });  
});