Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/77.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
jquery在单击事件时跳到顶部,返回false或prevenDefault';行不通_Jquery_Onclick_Slider - Fatal编程技术网

jquery在单击事件时跳到顶部,返回false或prevenDefault';行不通

jquery在单击事件时跳到顶部,返回false或prevenDefault';行不通,jquery,onclick,slider,Jquery,Onclick,Slider,我已经为内容滑块编写了一个简单的jquery脚本。我的问题是,滑动内容时,屏幕总是跳到父div的顶部位置。我已经尝试返回false和preventDefault来处理这个效果,但这两个选项只会使脚本不再工作,当我单击链接时,什么也不会发生 下面是jquery代码: $(document).ready(function (){ var itemCount = $('.container div').size(); var itemWidth = $('.container div').width

我已经为内容滑块编写了一个简单的jquery脚本。我的问题是,滑动内容时,屏幕总是跳到父div的顶部位置。我已经尝试返回false和preventDefault来处理这个效果,但这两个选项只会使脚本不再工作,当我单击链接时,什么也不会发生

下面是jquery代码:

$(document).ready(function (){

var itemCount = $('.container div').size();
var itemWidth = $('.container div').width();


$('.container').wrap('<div id="AboutSlider"></div>');

$('#AboutSlider').css({'width':'640px', 'overflow':'hidden', 'position':'relative', 'height':'400px'});

$('#AboutSlider .container').css({'width':itemCount*itemWidth+'px', 'position':'absolute', 'height':'400px'});

$('.container .aboutContent').css({'padding-left':'0px'});

$('#AboutSlider .aboutContent').css({'width':'640px', 'float':'left', 'min-height':'400px'});


$('#AboutNav a').click(function(){

        var integer = $(this).attr('rel');

        $('#AboutSlider .container').animate({left:-640*(parseInt(integer)-1)})  

        $('#AboutNav a').each(function(){
        $(this).removeClass('active');
            if($(this).hasClass('button'+integer)){
                $(this).addClass('active')}
        });

    }); 
$(文档).ready(函数(){
var itemCount=$('.container div').size();
var itemWidth=$('.container div').width();
$('.container').wrap('');
$('AboutSlider').css({'width':'640px','overflow':'hidden','position':'relative','height':'400px');
$('#AboutSlider.container').css({'width':itemCount*itemWidth+'px','position':'absolute','height':'400px');
$('.container.aboutContent').css({'padding-left':'0px'});
$(#AboutSlider.aboutContent').css({'width':'640px','float':'left','minheight':'400px');
$('#AboutNav a')。单击(函数(){
var integer=$(this.attr('rel');
$('#AboutSlider.container')。动画({left:-640*(parseInt(integer)-1)})
$('#AboutNav a')。每个(函数(){
$(this.removeClass('active');
if($(this).hasClass('按钮'+整数)){
$(this.addClass('active')}
});
}); 
}))

这里是相应的html位:

<div id="Dienstleistungen">
                        <div class="left_column">
                        <h2>Meine Dienstleistungen</h2>
                        <h3>KOMPETENZEN</h3>
                        <ul id="AboutNav">
                            <li><h1><a href="#Kompetenzen" class="button1 active" rel="1" title="Frontend Entwicklung | Sebastian B&ouml;hme">&Uuml;berblick</a></h1></li>
                            <li><h1><a href="#Frontend" class="button2" rel="2" title="Frontend Entwicklung | Sebastian B&ouml;hme">Frontend Entwicklung</a></h1></li>
                            <li><h1><a href="#CMS" class="button3" rel="3" title="Content Management Systeme &amp; Online Shops | Sebastian B&ouml;hme">Content Management Systeme &amp; Online Shops</a></h1></li>
                            <li><h1><a href="#SEO" class="button4" rel="4" title="Suchmaschinenoptimierung (SEO) | Sebastian B&ouml;hme">Suchmaschinenoptimierung (SEO)</a></h1></li>
                            <li><h1><a href="#ScreenDesign" class="button5" rel="5" title="Screen Design | Sebastian B&ouml;hme">Screen Design</a></h1></li>
                            <li><h1><a href="#Hand" class="button6" rel="6" title="Alles aus einer Hand | Sebastian B&ouml;hme">Alles aus einer Hand</a></h1></li>
                        </ul>
                        </div>

                        <div class="container">

                        <div id="Kompetenzen" class="aboutContent right_columns">
                            <h1>&Uuml;berblick</h1>
                            <p>Phasellus in massa. Curabitur dolor eros, gravida et, hendrerit ac, cursus non, massa. Aliquam lorem. In hac habitasse platea dictumst. Cras eu mauris. Quisque lacus. Donec ipsum. Nullam vitae sem at nunc pharetra ultricies. Vivamus elit eros, ullamcorper a, adipiscing sit amet, porttitor ut, nibh. Maecenas adipiscing mollis massa. Nunc ut dui eget nulla venenatis aliquet. Sed luctus posuere justo. Cras vehicula varius turpis. Vivamus eros metus, tristique sit amet, molestie dignissim, malesuada et, urna.
                            </p>
                            <p>Teng sit amet, porttitor ut, nibh. Maecenas adipiscing mollis massa. Nunc ut dui eget nulla venenatis aliquet. Sed luctus posuere justo. Cras vehicula varius turpis. Vivamus eros metus, tristique sit amet, molestie dignissim, malesuada et, urna.
                            </p>
                        </div>
                    <hr />
                        <div id="Frontend" class="aboutContent right_column ">
                            <h1>Frontend Entwicklung</h1>
                            <p>Phasellus in massa. Curabitur dolor eros, gravida et, hendrerit ac, cursus non, massa. Aliquam lorem. In hac habitasse platea dictumst. Cras eu mauris. Quisque lacus. Donec ipsum. Nullam vitae sem at nunc pharetra ultricies. Vivamus elit eros, ullamcorper a, adipiscing sit amet, porttitor ut, nibh. Maecenas adipiscing mollis massa. Nunc ut dui eget nulla venenatis aliquet. Sed luctus posuere justo. Cras vehicula varius turpis. Vivamus eros metus, tristique sit amet, molestie dignissim, malesuada et, urna.
                            </p>
                            <p>Teng sit amet, porttitor ut, nibh. Maecenas adipiscing mollis massa. Nunc ut dui eget nulla venenatis aliquet. Sed luctus posuere justo. Cras vehicula varius turpis. Vivamus eros metus, tristique sit amet, molestie dignissim, malesuada et, urna.
                            </p>
                        </div>
                    <hr />  
                        <div id="CMS" class="aboutContent right_column ">
                            <h1>Content Management Systeme &amp; Online Shops</h1>
                            <p>Phasellus in massa. Curabitur dolor eros, gravida et, hendrerit ac, cursus non, massa. Aliquam lorem. In hac habitasse platea dictumst. Cras eu mauris. Quisque lacus. Donec ipsum. Nullam vitae sem at nunc pharetra ultricies. Vivamus elit eros, ullamcorper a, adipiscing sit amet, porttitor ut, nibh. Maecenas adipiscing mollis massa. Nunc ut dui eget nulla venenatis aliquet. Sed luctus posuere justo. Cras vehicula varius turpis. Vivamus eros metus, tristique sit amet, molestie dignissim, malesuada et, urna.
                            </p>
                            <p>Teng sit amet, porttitor ut, nibh. Maecenas adipiscing mollis massa. Nunc ut dui eget nulla venenatis aliquet. Sed luctus posuere justo. Cras vehicula varius turpis. Vivamus eros metus, tristique sit amet, molestie dignissim, malesuada et, urna.
                            </p>
                        </div>
                    <hr />
                        <div id="SEO" class="aboutContent right_column ">
                            <h1>Suchmaschinenoptimierung (SEO)</h1>
                            <p>Phasellus in massa. Curabitur dolor eros, gravida et, hendrerit ac, cursus non, massa. Aliquam lorem. In hac habitasse platea dictumst. Cras eu mauris. Quisque lacus. Donec ipsum. Nullam vitae sem at nunc pharetra ultricies. Vivamus elit eros, ullamcorper a, adipiscing sit amet, porttitor ut, nibh. Maecenas adipiscing mollis massa. Nunc ut dui eget nulla venenatis aliquet. Sed luctus posuere justo. Cras vehicula varius turpis. Vivamus eros metus, tristique sit amet, molestie dignissim, malesuada et, urna.
                            </p>
                            <p>Teng sit amet, porttitor ut, nibh. Maecenas adipiscing mollis massa. Nunc ut dui eget nulla venenatis aliquet. Sed luctus posuere justo. Cras vehicula varius turpis. Vivamus eros metus, tristique sit amet, molestie dignissim, malesuada et, urna.
                            </p>
                        </div>
                    <hr />
                        <div id="ScreenDesign" class="aboutContent right_column ">
                            <h1>Screen Design</h1>
                            <p>Phasellus in massa. Curabitur dolor eros, gravida et, hendrerit ac, cursus non, massa. Aliquam lorem. In hac habitasse platea dictumst. Cras eu mauris. Quisque lacus. Donec ipsum. Nullam vitae sem at nunc pharetra ultricies. Vivamus elit eros, ullamcorper a, adipiscing sit amet, porttitor ut, nibh. Maecenas adipiscing mollis massa. Nunc ut dui eget nulla venenatis aliquet. Sed luctus posuere justo. Cras vehicula varius turpis. Vivamus eros metus, tristique sit amet, molestie dignissim, malesuada et, urna.
                            </p>
                            <p>Teng sit amet, porttitor ut, nibh. Maecenas adipiscing mollis massa. Nunc ut dui eget nulla venenatis aliquet. Sed luctus posuere justo. Cras vehicula varius turpis. Vivamus eros metus, tristique sit amet, molestie dignissim, malesuada et, urna.
                            </p>
                        </div>
                    <hr />
                        <div id="Hand" class="aboutContent right_column">
                            <h1>Alles aus einer Hand</h1>
                            <p>Curabitur dolor eros, gravida et, hendrerit ac, cursus non, massa. Aliquam lorem. In hac habitasse platea dictumst. Cras eu mauris. Quisque lacus. Donec ipsum. Nullam vitae sem at nunc pharetra ultricies. Vivamus elit eros, ullamcorper a, adipiscing sit amet, porttitor ut, nibh. Maecenas adipiscing mollis massa. Nunc ut dui eget nulla venenatis aliquet. Sed luctus posuere justo. Cras vehicula varius turpis. Vivamus eros metus, tristique sit amet, molestie dignissim, malesuada et, urna.
                            </p>
                            <p>Teng sit amet, porttitor ut, nibh. Maecenas adipiscing mollis massa. Nunc ut dui eget nulla venenatis aliquet. Sed luctus posuere justo. Cras vehicula varius turpis. Vivamus eros metus, tristique sit amet, molestie dignissim, malesuada et, urna.
                            </p>
                        </div>
                        </div><!-- AboutSlider -->
                    </div><!-- Dienstleistungen -->

梅因·迪恩斯特莱斯通根
科姆皮滕森
Ü;伯布里克 马萨的Phasellus。库拉比图·多洛·厄洛斯,孕妇和孕妇,亨德雷特·ac,卡苏斯·农,马萨。阿利奎姆洛雷姆。在hac habitasse Plateum,一句名言。克拉斯·尤莫里斯。奎斯克·拉库斯。多奈克·伊普苏姆。nunc pharetra ultricies的Nullam vitae sem。精英厄洛斯万岁,乌兰科佩尔a,阿迪皮斯·塞特,波特提托·尤特,尼布。梅塞纳斯与莫利斯·马萨告别。这是一个很好的例子。塞德·卢库斯·波苏尔·胡斯托。车轴草。维瓦摩斯·厄洛斯·梅特斯,特里斯蒂克·塞特·艾米特,莫莱斯蒂·德格尼西姆,玛莱苏亚达等,乌尔纳。

滕希特·阿梅特、波特提托·乌特、尼布。梅塞纳斯与莫利斯·马萨告别。这是一个很好的例子。塞德·卢库斯·波苏尔·胡斯托。车轴草。维瓦摩斯·厄洛斯·梅特斯,特里斯蒂克·塞特·艾米特,莫莱斯蒂·德格尼西姆,玛莱苏亚达等,乌尔纳。


前端肺 马萨的Phasellus。库拉比图·多洛·厄洛斯,孕妇和孕妇,亨德雷特·ac,卡苏斯·农,马萨。阿利奎姆洛雷姆。在hac habitasse Plateum,一句名言。克拉斯·尤莫里斯。奎斯克·拉库斯。多奈克·伊普苏姆。nunc pharetra ultricies的Nullam vitae sem。精英厄洛斯万岁,乌兰科佩尔a,阿迪皮斯·塞特,波特提托·尤特,尼布。梅塞纳斯与莫利斯·马萨告别。这是一个很好的例子。塞德·卢库斯·波苏尔·胡斯托。车轴草。维瓦摩斯·厄洛斯·梅特斯,特里斯蒂克·塞特·艾米特,莫莱斯蒂·德格尼西姆,玛莱苏亚达等,乌尔纳。

滕希特·阿梅特、波特提托·乌特、尼布。梅塞纳斯与莫利斯·马萨告别。这是一个很好的例子。塞德·卢库斯·波苏尔·胡斯托。车轴草。维瓦摩斯·厄洛斯·梅特斯,特里斯蒂克·塞特·艾米特,莫莱斯蒂·德格尼西姆,玛莱苏亚达等,乌尔纳。


内容管理系统&;网上商店 马萨的Phasellus。库拉比图·多洛·厄洛斯,孕妇和孕妇,亨德雷特·ac,卡苏斯·农,马萨。阿利奎姆洛雷姆。在hac habitasse Plateum,一句名言。克拉斯·尤莫里斯。奎斯克·拉库斯。多奈克·伊普苏姆。nunc pharetra ultricies的Nullam vitae sem。精英厄洛斯万岁,乌兰科佩尔a,阿迪皮斯·塞特,波特提托·尤特,尼布。梅塞纳斯与莫利斯·马萨告别。这是一个很好的例子。塞德·卢库斯·波苏尔·胡斯托。车轴草。维瓦摩斯·厄洛斯·梅特斯,特里斯蒂克·塞特·艾米特,莫莱斯蒂·德格尼西姆,玛莱苏亚达等,乌尔纳。

滕希特·阿梅特、波特提托·乌特、尼布。梅塞纳斯与莫利斯·马萨告别。这是一个很好的例子。塞德·卢库斯·波苏尔·胡斯托。车轴草。维瓦摩斯·厄洛斯·梅特斯,特里斯蒂克·塞特·艾米特,莫莱斯蒂·德格尼西姆,玛莱苏亚达等,乌尔纳。


这样的优化(SEO) 马萨的Phasellus。库拉比图·多洛·厄洛斯,孕妇和孕妇,亨德雷特·ac,卡苏斯·农,马萨。阿利奎姆洛雷姆。在hac habitasse Plateum,一句名言。克拉斯·尤莫里斯。奎斯克·拉库斯。多奈克·伊普苏姆。nunc pharetra ultricies的Nullam vitae sem。精英厄洛斯万岁,乌兰科佩尔a,阿迪皮斯·塞特,波特提托·尤特,尼布。梅塞纳斯与莫利斯·马萨告别。这是一个很好的例子。塞德·卢库斯·波苏尔·胡斯托。车轴草。维瓦摩斯·厄洛斯·梅特斯,特里斯蒂克·塞特·艾米特,莫莱斯蒂·德格尼西姆,玛莱苏亚达等,乌尔纳。

滕希特·阿梅特、波特提托·乌特、尼布。梅塞纳斯与莫利斯·马萨告别。这是一个很好的例子。塞德·卢库斯·波苏尔·胡斯托。车轴草。维瓦摩斯·厄洛斯·梅特斯,特里斯蒂克·塞特·艾米特,莫莱斯蒂·德格尼西姆,玛莱苏亚达等,乌尔纳。


屏幕设计
$('#AboutNav a').click(function(event) {
    event.preventDefault();

    var integer = $(this).attr("rel");

    $('#AboutSlider .container').animate({
        left: -640 * (parseInt(integer) - 1)
    })

    $('#AboutNav a').each(function() {
        $(this).removeClass('active');
        if ($(this).hasClass('button' + integer)) {
            $(this).addClass('active')
        }
    });

});
$('#AboutNav a').each(function(){
    $(this).removeClass('active');
    if($(this).hasClass('button'+integer)) {
        $(this).addClass('active')
    }
});
$("#AboutNav a").removeClass("active");
$(this).addClass('active');