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只用於測試）