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

我使用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来控制选择哪一个？

你会通过冲突来解决什么问题？@Omar每次我点击导航栏的内部设置（在我的示例中是未读选项卡或存档选项卡），它都会更改主标题选项卡（消息选项卡或详细信息选项卡）。你能提供这个问题的图像吗？您是否在单击的按钮上使用了JS？您可以发布jquery代码吗？还是用小提琴来演示问题？