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代码（用道格拉斯“活动”代码更新）谢谢！

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

基本上，我像以前一样添加active类，但我只将它用作参考。当用户单击链接时，会添加active类。如果链接具有active类，则不会在mouseout上设置动画。如果点击了非active课程，则会从所有其他导航链接中移除active，并将其全部动画显示到其起始点，并将新链接设为active。< / p>

使用相关代码可以更好地解释这一点：

// 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仅用于测试）

Javascript菜单选择

1 个答案: