我正在尝试设置一个标签式导航栏，但它没有隐藏其他标签中的内容。
类似地，创建新页面的方式不同。它显示了另一页的内容，就好像我在正常写它一样。
<!-- Chat Display and Tabs -->
<div id="tabs" data-role="tabs">
<div data-role="navbar">
<ul>
<li><a href="#globalChat" data-ajax="false">Global Chat</a></li>
<li><a href="#allyChat" data-ajax="false">Alliance Chat</a></li>
<li><a href="#privateChat" data-ajax="false">Private Chat</a></li>
</ul>
</div>
<div id="#globalChat" class="ui-body-d ui-content">
<div id="incomingMessages" name="incomingMessages" class="msgContainerDiv" ></div> <!-- Global Chat Display -->
</div>
<div id="#allyChat" class="ui-body-d ui-content">
<div id="incomingAMessages" name="incomingMessages" class="msgContainerDiv" ></div> <!-- Global Chat Display -->
</div>
<div id="#privateChat" class="ui-body-d ui-content">
<div id="incomingPMessages" name="incomingMessages" class="msgContainerDiv" ></div> <!-- Global Chat Display -->
</div>
</div>
头标签:
<head>
<title>Mod Panel</title>
<meta http-equiv=content-type content=text/html;charset=utf-8>
<meta name=viewport content=width=device-width>
<meta name=viewport content=initial-scale=1.0>
<meta name=viewport content=user-scalable=no>
<meta name=apple-mobile-web-app-capable content=yes>
<meta name=apple-mobile-web-app-status-bar-style content=black>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<link href="css/toastr.css" type="text/css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script src="js/md5.js"></script>
<script src="js/common.js"></script>
<script src="js/toastr.js"></script>
<script src="js/dateFormat.js"></script>
<script src="js/main.modpanel.js"></script>
<script src="js/blacklist.js"></script>
</head>
最佳答案
您的问题出在您的#globalChat、#allyChat 和#privateChat div 的id 上。设置 id 时，不应将散列 (#) 添加到名称前面，只有在引用 id 时才添加散列。
例如:
<div id="#globalChat" class="ui-body-d ui-content">
应该是
<div id="globalChat" class="ui-body-d ui-content">
为了被引用
<a href="#globalChat" data-ajax="false">Global Chat</a>
设置 id='#globalChat 意味着您需要引用 ##globalChat(我什至不确定这是否有效)。
我已经 fork 了 the plunker并且选项卡可以很好地使用更新后的 ID。
关于javascript - 显示所有选项卡内容的 jQuery Mobile 选项卡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30101109/