jquery ui標籤子導航

Question

我還是新來的網頁設計，並有進入jquery ui。我試圖使用標籤功能作爲我正在設計的頁面的導航。任何人有任何想法，我怎樣才能使子導航李的行爲像標籤李的？另外，當點擊子導航列表時，要使父標籤突出顯示，但內容面板顯示子菜單選項。任何人都有線索控制選定選項卡中顯示的內容？

我試圖使用我有的小jQuery技能。我編寫了一個點擊函數，使關於選項卡成爲活動選項卡，但它顯示關於選項卡中的內容，當我希望它顯示子導航選擇中的信息時。我也試圖將活動類添加到關於菜單，並在頁面上創建一個可怕的輸出。

這裏是我的html

<div id="tabs" style="width: 1000px; margin: 4px auto; padding: 0px;"> 
     <ul id="menu"> 
      <li><a href="#home">Home</a></li> 
      <li id="aboutLink"><a href="#about">About</a> 
       <ul id="subNav" style="color: #220c00;"> 
        <li><a href="#about">About Iota</a></li> 
        <li><a href="#chapterHistory">Chapter History</a></li> 
        <li><a href="#chapterOfficers">Chapter Officers</a></li> 
        <li><a href="#communityPartners">Community Partners</a></li> 
        <li><a href="#chapterEvents">Chapter Events</a></li> 
        <li><a href="#interestedInIota">Interested in Iota</a></li> 
       </ul> 
      </li> 
      <li><a href="#photos">Photos</a></li> 
      <li><a href="#contactUs">Contact Us</a></li> 
      <li><a href="www.iotaphitheta.org">National Site</a></li> 
      <li><a href="#">Brothers Only</a></li> 
     </ul> 

，這是我的jQuery

main = function() { 
$('#subNav').addClass('subNav'); 
$('#aboutLink').hover(function() { 
    $('#subNav').removeClass('subNav');}, 
    function() { $('#subNav').addClass('subNav'); 
    }); 
$('#subNav').children().click(function() { 
    $('#tabs').tabs({active: 1}); 
    $('#subNav').removeClass('subNav'); 
    }); 
    }; 
$(document).ready(main); 

小提琴是這裏https://jsfiddle.net/leggosteveo/d3byhbd9/2/

任何及所有的幫助深表感謝。

Answer 1

爲什麼要重新發明輪子？有很多已經創建的jQuery菜單應該可以滿足你的需求。這裏有一個讓你可以在網站上自定義你需要的東西，包括菜單選項和外觀。它還顯示HTML和JavaScript的使用，所以如果沒有別的，你可以用它作爲模型。

http://cssmenumaker.com/menu/responsive-jay-dropdown-menu#

當使用現有的產品，你會節省時間，大部分的時間，你可以信任其被更徹底的測試。

Answer 2

所以，我看了你的評論，你真的想了解javascript，就是使用CSS3和HTML5簡單的菜單變得很受歡迎，因爲你不需要JQuery或JavaScript添加動畫

只是改變了風格因爲我沒有使用jQuery UI的

入住這fiddle

<nav id="menu"> 
    <ul class="parent-menu"> 
     <li><a href="#">Home</a> 
     </li> 
     <li><a href="#">About Us</a> 
      <ul> 
       <li><a href="#">About Iota</a> 
       </li> 
       <li><a href="#">Chapter History</a> 
       </li> 
       <li><a href="#">Chapter Officers</a> 
       </li> 
       <li><a href="#">item</a> 
       </li> 
       <li><a href="#">item</a> 
       </li> 
      </ul> 
     </li> 
     <li><a href="#">Photos</a> 
     </li> 
     <li><a href="#">Contact Us</a> 
     </li> 
     <li><a href="#">National Site</a> 
     </li> 
     <li><a href="#">Brothers Only</a> 
     </li> 
    </ul> 
</nav> 

CSS

p, ul, li, div, nav { 
    padding:0; 
    margin:0; 
} 
body { 
    font-family:Calibri; 
} 
#menu { 
    overflow: auto; 
    position:relative; 
    z-index:2; 
} 
.parent-menu { 
    background-color: #0c8fff; 
    min-width:200px; 
    float:left; 
} 
#menu ul { 
    list-style-type:none; 
} 
#menu ul li a { 
    padding:10px 15px; 
    display:block; 
    color:#fff; 
    text-decoration:none; 
} 
#menu ul li a:hover { 
    background-color:#007ee9; 
} 
#menu ul li:hover > ul { 
    left: 200px; 
    -webkit-transition: left 200ms ease-in; 
    -moz-transition: left 200ms ease-in; 
    -ms-transition: left 200ms ease-in; 
    transition: left 200ms ease-in; 
} 
#menu ul li > ul { 
    position: absolute; 
    background-color: #333; 
    top: 0; 
    left: -200px; 
    min-width: 200px; 
    z-index: -1; 
    height: 100%; 
    -webkit-transition: left 200ms ease-in; 
    -moz-transition: left 200ms ease-in; 
    -ms-transition: left 200ms ease-in; 
    transition: left 200ms ease-in; 
} 
#menu ul li > ul li a:hover { 
    background-color:#2e2e2e; 
} 

要更改爲你喜歡

-webkit-transition: left 200ms ease-in; 
-moz-transition: left 200ms ease-in; 
-ms-transition: left 200ms ease-in; 
transition: left 200ms ease-in;