2

我创建了一个小的 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 信息，即根据单击的内容过滤内容休息应该被隐藏起来。请提出建议。（请忽略我在左侧导航中创建的 href，因为我试图查看单击时的行为）。当单击左侧导航时，此功能应适用于任何选项卡内容，即单击左侧的表 1 时，它应跳转并在右侧显示表 1。

4

1 回答 1

0

这是满足您要求的最终代码。我已经为特定选项卡编写了点击功能。 

<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>
于 2013-12-04T13:02:48.283 回答