javascript - 当前导航链接问题(使用 jQuery Blend)

Question

我是 Javascript 的新手，请多多包涵。 :P

所以我有一个导航，它目前使用 Color Powered (http://colorpowered.com/blend/) 的 jQuery Blend 插件。单击导航中的一个链接后，它会执行一个 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 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)的背景位置是可行的，但由于 blend 插件在元素上添加了第二个类(例如，#nav_about.hover)，它会隐藏它。

我所需要的只是一种方法来更改单击的导航链接的背景位置并使其可见，而 blend 插件并没有让我轻松做到这一点。

Answer 1

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

// 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 可能会解决混合添加的元素遮挡 anchor 背景图像的问题。