jquery ui 选项卡子导航

Question

我还是网页设计的新手，并且已经涉足 jquery ui。我正在尝试使用标签功能作为我正在设计的页面的导航。任何人都知道如何使子导航 li 的行为与标签 li 的行为一样？并且当单击子导航 li 时，使父选项卡 li 突出显示，但内容面板显示子菜单选择。有人知道我在哪里控制所选选项卡中显示的内容吗？

我尝试使用我所拥有的小 jquery 技能。我编写了一个单击功能，使关于选项卡成为活动选项卡，但是当我希望它显示来自子导航选择的信息时，它会显示关于选项卡的内容。我还尝试将活动类添加到 about 菜单中，它会在页面上创建一个可怕的输出。

这是我的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;