HTML/CSS/jquery - вкладки навигации
Я создал небольшую страницу HTML, на которой есть вкладки навигации. Я посетил http://jqueryui.com/accordion/ для справки. Образец HTML, созданный на основе этого
<!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, то есть фильтровать содержимое на основе того, что было нажато. и отдых должен быть скрыт. Пожалуйста, предложите. (Пожалуйста, игнорируйте ссылку, которую я создал в левой навигации, когда я пытался увидеть поведение при нажатии). Эта функция должна работать для любого содержимого вкладки при щелчке левой навигационной панели, т. Е. При щелчке по таблице 1 слева она должна перейти и отобразить таблицу 1 справа.
1 ответ
Это окончательный код для удовлетворения ваших требований. Я написал функции щелчка для конкретной вкладки.
<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();
$("#ui-accordion-accordion-header-1").click( function(){
$("#ui-id-2").click();
});
$("#ui-accordion-accordion-header-0").click( function(){
$("#ui-id-1").click();
});
$("#app1").click( function(){
$("#appTable1").show();
$("#appTable2").hide();
});
$("#app2").click( function(){
$("#appTable2").show();
$("#appTable1").hide();
});
$("#app3").click( function(){
$("#appTable2").hide();
$("#appTable1").hide();
});
$("#tab1").click( function(){
$("#tabtab1").show();
$("#tabtab2").hide();
$("#tabtab3").hide();
});
$("#tab2").click( function(){
$("#tabtab1").hide();
$("#tabtab2").show();
$("#tabtab3").hide();
});
$("#tab3").click( function(){
$("#tabtab1").hide();
$("#tabtab2").hide();
$("#tabtab3").show();
});
});
</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 id="app1">Application 1</li>
<li id="app2">Application 2</li>
<li id="app3">Application 3</li>
</li>
</div>
<h3>Table</h3>
<div>
<li>
<li id="tab1">Table 1</li>
<li id="tab2">Table 2</li>
<li id="tab3">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" id="appTable1" hidden="true"><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" id="appTable2" hidden="true"><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 hidden="true" id="tabtab1">Table 1</li>
<li hidden="true" id="tabtab2">Table 2</li>
<li hidden="true" id="tabtab3">Table 3</li>
</ul>
</div>
</div>
</div>
</body>
</html>