0

编码新手，请帮帮我。我有一个垂直导航的滑动代码。当用户将鼠标悬停在导航上时，它会向右滑出。一旦用户单击导航，我希望它保持活动状态。我该怎么做呢？这是一个视觉的链接

http://edgecastcdn.net/00009B//TEMP/NAV/index.html

作为对您的帮助的回报，这是你们可能会喜欢的一个笑话（如果您还没有听说过的话）

一位妻子问她的丈夫，一位计算机程序员；“你能不能帮我去商店买一箱牛奶，如果他们有鸡蛋，就买六个！”

不久之后，丈夫带着 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 */
}
4

1 回答 1

0

看起来您的导航实际上并没有更改页面，只是在页面上加载（或切换）新内容。

在用户单击链接后保持这种状态的最简单方法是添加具有正确设置的类。例如：

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在.activeCSS 中使用，但我个人更喜欢这种方法。

基本上，我active像以前一样添加了类，但我只将它用作参考。当用户单击链接时，将active添加该类。如果链接具有active该类，则它不会在鼠标移出时设置动画。当一个 notactive类被点击时，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/ （添加console.log()并return false在 jsFiddle 中仅用于测试）

于 2012-07-13T03:43:53.240 回答