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。