2
탐색 탭이있는 작은 HTML 페이지를 만들었습니다. 나는 참조 용으로 http://jqueryui.com/accordion/을 방문했다. 샘플 HTML이 사용됩니다이 accordion 및 tabs 기능에서 그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>
을 기준으로 작성. 이 HTML 페이지에는 두 개의 탐색 즉, 수직 및 수평이 있습니다. 이제 내 문제는 왼쪽 탐색의 응용 프로그램 탭에서 응용 프로그램 1을 클릭 한 다음 오른쪽에 자세한 정보가 포함 된 포인터가 응용 프로그램 탭으로 이동 한 다음 응용 프로그램 1 정보 (예 : 클릭 한 내용을 기반으로 내용 필터링) 만 표시해야하는 경우입니다. 그리고 나머지는 숨겨 져야한다. 제발 제안 해주세요. (클릭했을 때 동작을 보려고 할 때 왼쪽 탐색에서 만든 href를 무시하십시오). 이 기능은 왼쪽 탐색 메뉴에서 클릭하면 모든 탭 내용에 대해 작동합니다. 즉, 왼쪽의 표 1을 클릭하면 표 1이 오른쪽으로 이동하고 표시되어야합니다.