2013-10-23 182 views
2

我已經創建了一個小的HTML頁面,其中有導航選項卡。我訪問了http://jqueryui.com/accordion/作爲參考。樣本HTML的是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> 

的基礎在這個accordiontabs功能用於創建。該HTML頁面包含兩個導航,即一個垂直和一個水平。現在我的問題是,當用戶單擊左側導航中的應用程序選項卡下的應用程序1時,然後在右側包含詳細信息時,指針應該轉到應用程序選項卡,然後僅顯示應用程序1信息,即基於點擊的內容過濾內容休息應該隱藏起來。請建議。(請忽略我在左側導航中創建的href,因爲我試圖在點擊時看到行爲)。此功能適用於在左側導航時點擊的任何標籤內容,即當點擊左側的表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>