Javascript菜单选择
Javascript菜单选择
提问于 2012-07-12 19:43:28
刚开始编码，请帮帮我。我有垂直导航的滑动码。当用户在导航线上方盘旋时，它会向右滑行。我希望它保持活跃，一旦用户点击导航。我该怎么做呢？这里有一个指向视觉的链接
http://edgecastcdn.net/00009B//TEMP/NAV/index.html
作为对你帮助的回报，这里有一个你们可能会喜欢的笑话(如果你们还没听说过)
一位妻子问她的丈夫，一位电脑程序员，“你能帮我去商店买一盒牛奶吗?如果他们有鸡蛋，可以买6个！” 过了一会儿，丈夫带着6箱牛奶回来了。 妻子问他：“你为什么要买6箱牛奶？” 他回答说：“他们有鸡蛋。”
谢谢各位，任何帮助都是非常感谢的！这是密码。如果你也需要css，请告诉我。
$(document).ready(function(){
slide("#sliding-navigation", 30, 15, 150, .8);
});
function slide(navigation_id, pad_out, pad_in, time, multiplier){
// creates the target paths
var list_elements = navigation_id + " li.sliding-element";
var link_elements = list_elements + " a";
// initiates the timer used for the sliding animation
var timer = 0;
// creates the slide animation for all list elements
$(list_elements).each(function(i)
{
// margin left = - ([width of element] + [total vertical padding of element])
$(this).css("margin-left","-180px");
// updates timer
timer = (timer*multiplier + time);
$(this).animate({ marginLeft: "0" }, timer);
$(this).animate({ marginLeft: "12px" }, timer);
$(this).animate({ marginLeft: "0" }, timer);
});
// creates the hover-slide effect for all link elements
$(link_elements).each(function(i)
{
$(this).hover(
function()
{
$(this).animate({ paddingLeft: pad_out }, 150);
},
function()
{
$(this).animate({ paddingLeft: pad_in }, 150);
});
});
}这是我的CSS代码(用道格拉斯的“活动”代码更新)谢谢！
body
{
margin: 0;
padding: 0;
background: #1d1d1d;
font-family: "Lucida Grande", Verdana, sans-serif;
font-size: 100%;
}
h2
{
color: #999;
margin-bottom: 0;
margin-left:13px;
background:url(navigation.jpg) no-repeat;
height:40px;
}
h2 span
{
display: none;
}
p navigation-block
{
color: #00b7e6;
margin-top: .5em;
font-size: .75em;
padding-left:15px;
}
#navigation-block {
position:relative;
}
#hide {
position:absolute;
top:30px;
left:-190px;
}
ul#sliding-navigation
{
list-style: none;
font-size: 0.75em;
margin: 30px 0;
padding: 0;
}
ul#sliding-navigation li.sliding-element h3,
ul#sliding-navigation li.sliding-element a
{
display: block;
width: 150px;
padding: 2px 18px;
margin: 0;
margin-bottom: 0px;
}
ul#sliding-navigation li.sliding-element h3
{
color: #fff;
background:#333333 url(heading_bg.jpg) repeat-y;
padding-top: 7px;
padding-bottom: 7px;
}
ul#sliding-navigation li.sliding-element a
{
color: #999;
background:#222 url(tab_bg.jpg) repeat-y;
border: 1px solid #1a1a1a;
text-decoration: none;
}
ul#sliding-navigation li.sliding-element a.selected { color: #cc0000; }
{
color: #FFF;
margin-top: 0.5em;
font-size: 10pt;
padding-left:15px;
font-weight: bolder;
}
ul#sliding-navigation li.sliding-element a:hover { color: #00b7e6; background:#2a2a2a; }
#navigation-block p {
color: #FFF;
margin-top: 0.5em;
font-size: 10pt;
padding-left:15px;
font-weight: bolder;
}
.active{
padding-left:12px;
/*Add whatever other styles you need */
}回答 1
Stack Overflow用户
回答已采纳
发布于 2012-07-13 03:43:53
看起来你的导航器并没有真正改变页面，只是在页面上加载(或切换)新内容。
在用户单击链接之后，最简单的方法是添加一个具有正确设置的类。例如：
jQuery
$(link_elements).hover(
function()
{
$(this).animate({ paddingLeft: pad_out }, 150);
},
function()
{
$(this).animate({ paddingLeft: pad_in }, 150);
}
).click(function(){
$(link_elements).removeClass("active");
$(this).addClass("active");
});CSS
.active{
padding-left:12px;
/*Add whatever other styles you need */
}编辑:添加CSS
编辑:好的，我看到了我之前错过的东西-- jQuery正在设置覆盖外部CSS的填充内联。从技术上讲，您可以在!important CSS中使用.active，但我个人更喜欢这种方法。
基本上，我像以前一样添加了active类，但我只使用它作为引用。当用户单击链接时，将添加active类。如果一个链接有active类，它不会在鼠标上显示动画。当单击非active类时，active将从所有其他导航链接中删除，它们都会被动画化到它们的起始点，并且新的链接是active。
这一点可以用有关守则加以更好的解释：
// creates the hover-slide effect for all link elements
$(link_elements).each(function(i) {
$(this)
.hover(
function() {
$(this).animate({ paddingLeft: pad_out }, 150);
}, function() {
if(!$(this).hasClass("active"))
$(this).animate({ paddingLeft: pad_in }, 150);
})
.click(
function() {
$(link_elements).not($(this)).removeClass("active").animate({ paddingLeft: pad_in}, 150);
$(this).addClass("active");
});
}); // End `each` loop以及相关的jsFiddle：http://jsfiddle.net/eAaCn/ (在jsFiddle中添加了console.log()和return false，仅用于测试)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11459444
复制相关文章
相似问题
腾讯云开发者
