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>
Другие вопросы по тегам