Javascript 当前导航链路故障（使用jQuery Blend）

我是Javascript的新手，请耐心听我说P

因此，我有一个nav，它目前利用颜色驱动的jQuery混合插件http://colorpowered.com/blend/. 单击nav中的一个链接后，它将执行一个javascript函数，该函数反过来使用jquery加载函数从另一个页面上的div获取内容，并将其加载到当前页面

基本上，我这样做是为了不带你到另一个页面，它只是加载内容。以下是我的javascript代码：

function load(file) {
$('#wrapper').fadeOut('slow', function() {
        $('#container').load('/' + file + '.html #container', function() {
            $('#wrapper').fadeIn('slow', function() {
            $(document).ready(function(){
                $("#nav a").blend();
            });

            $(document).ready(function(){
                $("#pagenav a").blend();
            });

            Cufon('h1', { fontFamily: 'Myriad Pro Condensed', fontWeight: 'bold', color: '#ffc000', textShadow: '-1.5px 0px #783012', textTransform: 'lowercase' }); 
            Cufon.replace('#nav a', { fontFamily: 'Vegur' });
            Cufon.replace('#pagenav a', { fontFamily: 'Vegur' });
        });
    });
});
}

blend插件限制我这么做的原因是，当你点击导航链接时，背景图像会被修改，显示为刚刚按下的导航链接是当前链接的指示器

以下是与blend插件相关的css，以及一般的nav：

#nav a:link {
  font-weight:bold;
  text-align:center;
  color:#000000;
  width:120px;
  height:100px;
  font-size:90%;
  font-family:Arial;
  margin-right:0px;
  border-left:1px white solid;
  display:inline-block;
  line-height:75px;
  text-decoration:none;
  background-image:url('img/img-nav.png');
  background-repeat:no-repeat;
}

#nav a:visited {
  font-weight:bold;
  text-align:center;
  color:#000000;
  font-size:90%;
  font-family:Arial;
  width:120px;
  height:100px;
  margin-right:0px;
  border-left:1px white solid;
  display:inline-block;
  line-height:75px;
  text-decoration:none;
  background-image:url('img/img-nav.png');
  background-repeat:no-repeat;
}  

#nav_home {background-position:0 0;}
#nav_home:hover,#nav_home.hover {
  background-position:0 -100px;
}

#nav_about {background-position:0 0;}
#nav_about:hover,#nav_about.hover {
  background-position:0 -100px;
}

#nav_services {background-position:0 0;}
#nav_services:hover,#nav_services.hover {
  background-position:0 -100px;
}

#nav_contact {background-position:0 0;}
#nav_contact:hover,#nav_contact.hover {
  background-position:0 -100px;
}

使用getElementById更改特定元素（如nav_home或nav_about）的背景位置是可行的，但由于混合插件在元素上添加了第二个类（例如nav_about.hover），因此它将其隐藏

---

我所需要的只是一种改变点击导航链接的背景位置并使其可见的方法，这是blend插件不允许我轻松做到的。

您可能想要手动添加/删除一个类来设置当前锚的样式：

// JavaScript
$('#nav a').click(function(event){
  $(this).addClass('current').siblings().removeClass('current');
  load(this.href);
  event.preventDefault; // or return false
});

// CSS
a.current { background-position: 0 -100px; z-index: 100 }

---

z-index可能会通过混合模糊锚定的背景图像来解决添加元素的问题。

您可能希望手动添加/删除类以设置当前锚定的样式：

// JavaScript
$('#nav a').click(function(event){
  $(this).addClass('current').siblings().removeClass('current');
  load(this.href);
  event.preventDefault; // or return false
});

// CSS
a.current { background-position: 0 -100px; z-index: 100 }

---

z-index可能会解决通过混合模糊主播背景图像而添加元素的问题。

也不需要：访问和：链接。它们似乎定义了相同的样式，因此最好用nav a{…}替换它们。而且不需要：visted和：link。它们似乎定义了相同的样式，因此最好用nav a{…}替换它们。