我正在使用jQuery Mobile建立一个基本的移动网站。我有一个带有3个导航按钮的基本导航栏。每个按钮将用户带到站点的特定部分,然后他们可以在那里运行搜索并深入查看详细信息页面以及更多详细信息。我希望代表当前“部分”的按钮突出显示/标记为活动状态,即使用户不在按钮链接的特定页面上。
举个例子,导航栏就是这样的:
<div data-role="footer" data-position="fixed" data-theme="b" data-id="myHeader">
<div data-role="navbar">
<ul>
<li><a href="BookSearch.cfm" data-icon="book">Book Search</a></li>
<li><a href="MovieSearch.cfm" data-icon="movie">Movie Search</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
然后,当用户点击“图书搜索”并将其带到搜索页面时,“图书搜索”图标应为“活动”。 (目前不是。)此外,当用户搜索书籍并获得结果列表,然后选择特定书籍以查看更多详细信息等时,“书籍搜索”图标应保持“已选中”,以便很清楚网站的哪个部分目前正在使用中。
我在ColdFusion中对此进行编码,我想到的唯一解决方案是为每个部分创建一个页面列表,并检查当前页面是否在列表中;如果是,请为相关的导航栏按钮手动设置class="ui-btn-active ui-state-persist"
。还有其他更好的方法来实现这个目标吗?