jquery ui选项卡子导航
我仍然是网页设计的新手，并且已经深入到jquery ui中。我正在尝试使用标签功能作为我正在设计的页面的导航。有没有人知道我如何让子导航li的行为像tab li一样呢？以及当子导航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/
任何帮助都是非常感谢的。
回答 2
Stack Overflow用户
发布于 2015-06-20 01:44:47
为什么要重新发明轮子呢？已经创建了大量的jQuery菜单，可以满足您的需求。这里有一个可以让你在他们的网站上定制你需要的东西，包括菜单选项和外观。它还显示了它使用的HTML和javascript，所以如果没有其他东西，你可以把它作为一个模型使用。
http://cssmenumaker.com/menu/responsive-jay-dropdown-menu#
当使用现有的产品时，你会节省时间，而且大多数时候你可以相信它经过了更彻底的测试。
Stack Overflow用户
发布于 2015-06-22 03:18:48
所以我读了你的评论，你真的想了解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;https://stackoverflow.com/questions/30833727
复制相似问题
腾讯云开发者
