2
我已经创建了一个小的HTML页面，其中有导航选项卡。我访问了http://jqueryui.com/accordion/作为参考。样本HTML的是HTML/CSS/jquery - 导航标签
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Accordion - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$("#accordion").accordion();
});
</script>
<script>
$(function() {
$("#tabs").tabs();
});
</script>
<style type="text/css">
div #tabs
{
width:900px;
float:left;
}
div #accordion
{
width:250px;
float:left;
}
</style>
</head>
<body>
<div>
<div id="accordion">
<h3>Application</h3>
<div>
<li>
<li><a href="#Application1">Application 1</a></li>
<li><a href="#Application2">Application 2</a></li>
<li>Application 3</li>
</li>
</div>
<h3>Table</h3>
<div>
<li>
<li>Table 1</li>
<li>Table 2</li>
<li>Table 3</li>
</li>
</div>
</div>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Application</a></li>
<li><a href="#tabs-2">Table</a></li>
</ul>
<div id="tabs-1">
<a id="Application1" name="Application1"></a><table border="1"><caption><b>Application 1</b></caption><tr><th>Sub Application</th><th>TableName</th><th>Count</th><th>CreationDate</th></tr><tr><td>Test 1</td><td> Table A</td><td>319</td><td>20-10-2013</td></tr></table>
<a id="Application2" name="Application2"></a><table border="1"><caption><b>Application 2</b></caption><tr><th>Sub Application</th><th>TableName</th><th>Count</th><th>CreationDate</th></tr><tr><td>Test 1</td><td> Table D</td><td>400</td><td>19-10-2013</td></tr></table>
</div>
<div id="tabs-2">
<ul>
<li>Table 1</li>
<li>Table 2</li>
<li>Table 3</li>
</ul>
</div>
</div>
</div>
</body>
</html>
的基础在这个accordion和tabs功能用于创建。该HTML页面包含两个导航，即一个垂直和一个水平。现在我的问题是，当用户单击左侧导航中的应用程序选项卡下的应用程序1时，然后在右侧包含详细信息时，指针应该转到应用程序选项卡，然后仅显示应用程序1信息，即基于点击的内容过滤内容休息应该隐藏起来。请建议。（请忽略我在左侧导航中创建的href，因为我试图在点击时看到行为）。此功能适用于在左侧导航时点击的任何标签内容，即当点击左侧的表1时，它应跳转并在右侧显示表1。