Question

我创建了一个小的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。

Answer 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>

HTML / CSS / jquery - 导航选项卡

1 个答案: