Javascript菜单选择

Question

编码新手，请帮助我。我有一个垂直导航的滑动代码。当用户悬停在导航上时，导航会向右滑动。我希望它在用户点击导航后保持活动状态。我该怎么做？这里有一个指向可视的链接

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"活动"代码）谢谢！

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。从技术上讲，您可以在.activeCSS中使用!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仅用于测试）