jquery - 有没有办法在 jquery mobile 中嵌套导航栏

Question

我在另一个使用 jquerymobile 的导航栏中有一个导航栏，如下所示：

<div data-role="navbar">
    <ul>           
        <li><a href="#" data-tab-class="tab-messages">Messages</a</li>
        <li><a href="#" data-tab-class="tab-details">Details</a</li>
    </ul>
</div>

<div class="tab-content tab-messages">
    <div data-role="navbar">
        <ul>
            <li class="task-nav"><a data-tab-class="tab-unread">Unread</a></li>
        <li class="task-nav"><a data-tab-class="tab-archived">Archived</a></li> 
        </ul>
</div>    
</div>

<div class="tab-content tab-details">
    <h1>Info for details tab goes here!</h1>
</div>

但是，当我单击其中一个嵌套选项卡时，它们似乎与外部选项卡冲突并且也会更改它们。有没有办法我可以使用一些 javascript 或 jquery 来控制选择哪些？