Javascript菜单选择

Question

新的编码，请帮助我。我有一个垂直导航的滑动代码。当用户悬停在导航栏上时，它向右滑动。我希望用户点击导航后保持活动状态。我该如何去做呢？这是换取你帮到visiual

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代码（更新为Douglas“active”code）谢谢！

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 */ 
} 

Answer 1

它看起来像你的导航并没有实际改变页面，只是加载（或关闭）页面上的新内容。

在用户单击链接后，最简单的方法是添加具有正确设置的类。例如：

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的填充。您技术上可以在.active CSS中使用!important，但我个人更喜欢这种方法。

基本上，我像以前一样添加了active类，但我只是将它用作参考。当用户点击链接时，将添加active类。如果链接具有active类，则它不会在mouseout上进行动画处理。当点击一个不是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只用于测试）