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' });
        });
    });
});
}

混合插件限制我做的是制作它，以便当您单击导航链接时，背景图像被修改为显示为刚刚按下的导航链接是当前链接的指示符。

这是与混合插件相关的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）可以正常工作，但由于混合插件会在元素上添加第二个类（例如，＃nav_about.hover），因此它会隐藏它。

我只需要一种方法来改变点击的导航链接的背景位置并使其可见，混合插件不会让我轻易做到。

Answer 1

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

// 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 Link问题（使用jQuery Blend）

1 个答案: