Question

以下单页网站使用航点脚本来导航和突出显示导航项 - http://www.jbleitch.co.uk/dt/

效果很好 - 问题是我们需要更改链接以导航到外部网站 - 但脚本可以防止任何链接上的默认值 - 所以它相当复杂！

这是原始脚本 -

 //Cache some variables
var links = $('.navigation').find('li');
slide = $('.slide');
button = $('.button');
mywindow = $(window);
htmlbody = $('html,body');
var dataslider = 1;
var clicked = false;
var windowWidth = window.innerWidth;
var narrow = (windowWidth <= 1000);
var navblock = $('.navBlock');
var dataslide = 1;
var myDirection = 'down';
var curSlide = 0;

slide.waypoint(function(direction) {
    if (direction === "down") {
        dataslide = $(this).attr('data-slide');
        curslide = dataslide;
        if (narrow) {
            navScroll(dataslide);
        }

        $('.navigation li[data-slide="' + dataslide +   '"]').addClass('active').prev().removeClass('active');

    }
}, {
    offset: '25%'
}).waypoint(function (direction) {
    if (direction === "up") {
        dataslide = $(this).attr('data-slide');
        curslide = dataslide;
        if (narrow) {
            navScroll(dataslide);
        }

        links.removeClass('active');
        $('.navigation li[data-slide="' + dataslide + '"]').addClass('active');
    }
}, {
    offset: '-25%'
});

//waypoints doesnt detect the first slide when user scrolls back up to the top so we add this little bit of code, that removes the class
//from navigation link slide 2 and adds it to navigation link slide 1.
mywindow.scroll(function () {
    if (mywindow.scrollTop() == 0) {
        $('.navigation li[data-slide="1"]').addClass('active');
        $('.navigation li[data-slide="2"]').removeClass('active');
    }

    //if (dataslide === 0 && $('.slide[data-slide=2]').offset().top > 10) {
    //    navblock.hide();
    //}
});

//Create a function that will be passed a slide number and then will scroll to that slide using jquerys animate. The Jquery
//easing plugin is also used, so we passed in the easing method of 'easeInOutQuint' which is available throught the plugin.
function goToByScroll(dataslide) {
    //alert(myDirection);
    //alert(dataslide + ' ' + curSlide);
    var scrollto = $('.slide[data-slide="' + dataslide + '"]').offset().top
    //if (dataslide > curSlide) {
    //    scrollto = scrollto + 1;
    //    //alert("down");
    //}
    //else if (dataslide < curSlide) {
    //    //alert("up");
    //    scrollto = scrollto - 1;
    //}
    htmlbody.stop().animate({
        scrollTop: scrollto
    }, 3200, 'swing', function () {
        if (narrow) {
            navScroll(dataslide);
        }
        else {
            navblock.removeClass('nofix');
            navblock.removeAttr('style');
        }
        curSlide = dataslide
    });

    //setTimeout(function () {  }, 3300);

}

//When the user clicks on the navigation links, get the data-slide attribute value of the link and pass that variable to the goToByScroll function
links.click(function (e) {

    e.preventDefault();
    dataslider = $(this).attr('data-slide');
   clicked = true;
    if (narrow) {
        navblock.fadeOut();
    }
    goToByScroll(dataslider);
});

//When the user clicks on the button, get the get the data-slide attribute value of the button and pass that variable to the goToByScroll function
button.click(function (e) {
    e.preventDefault();
    dataslider = $(this).attr('data-slide');
    clicked = true;
    if (narrow) {
        navblock.fadeOut();
    }
    goToByScroll(dataslider);

});

function navScroll(dataslide) {
    //alert('div[data-slide="' + dataslide + '"]');
    var slidepos = $('.slide[data-slide="' + dataslide + '"]').offset.top;
    navblock.addClass('nofix');
    //navblock.hide();
    navblock.css({ top: $('.slide[data-slide="' + dataslide + '"]').offset().top });
    navblock.fadeIn('slow');
    //alert(navblock.attr('class'));
    //alert("nav scroll");
}

这是导航列表 -

<ul class="navigation">

                        <li data-slide="2" class="nv1 active">Services</li>

                        <li data-slide="3" class="nv2">Fees &amp; Reporting</li>

                        <li data-slide="4" class="nv3">News</li>

                        <li data-slide="5" class="nv4">Meet the Team</li>

                        <li data-slide="5" class="nv4"><a style="color:inherit!important; text-decoration:none" href="http:www.othersite.com">Careers</a></li>

                        <li data-slide="7" class="nv6">Our Credentials</li>

                        <li data-slide="8" class="nv7">Contact</li>

            </ul>

我需要更改职业网站以导航到网址，但上面的脚本阻止它这样做 - 我尝试了以下更改 -

 links.click(function (e) {
    if(!=".nv5"){
    e.preventDefault();
    dataslider = $(this).attr('data-slide');
   clicked = true;
    if (narrow) {
        navblock.fadeOut();
    }
    goToByScroll(dataslider);
    }
   });

但没有运气 - 任何人都可以建议替代方案！？

Answer 1

通常我会在数据属性中获取我想要的信息，然后我可以做任何事情

<li data-slide="5" class="nv4">
     <a href="#" data-ref="http:www.othersite.com">Careers</a>
</li>

然后，在点击处理程序中：

links.click(function (e) {
    if($(this).attr("data-ref") != ""){
        //get the link
        var link = $(this).attr("data-ref");
        //go to link
        window.location.href = link;
    } else {
        e.preventDefault();
        dataslider = $(this).attr('data-slide');
        clicked = true;
        if (narrow) {
            navblock.fadeOut();
        }
        goToByScroll(dataslider);
    }
});

Answer 2

您只需在链接方法中添加一个条件，即检查属性或其他属性，并在需要时按照链接进行操作

您最初的尝试是在正确的轨道上。这应该工作

links.click(function (e) {
    if(!$(this).hasClass("nv5")){
        e.preventDefault();
        dataslider = $(this).attr('data-slide');
        clicked = true;
        if (narrow) {
            navblock.fadeOut();
        }
        goToByScroll(dataslider);
    }
});

假设您在要删除行为的链接上有nv5类

Jquery函数 - 忽略函数内的特定链接

2 个答案: