Question

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

我试图使用我的小jquery技能。我编写了一个单击功能，使about选项卡成为活动选项卡，但是当我希望它显示来自子导航选择的信息时，它会显示about选项卡中的内容。我还试图将活动类添加到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的简单菜单变得非常受欢迎，因为你不需要{{1 }或JQuery添加动画

刚改变了样式，因为我没有使用jquery ui

选中此fiddle

JavaScript

<强> CSS

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

要更改动画的速度，请根据需要设置此代码中的数值

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;
}

jquery ui tabs子导航

2 个答案: