Question

我的javascript曾经直接插入到我的html页面中。它变得很大，我决定把它移到一个单独的文件中。但我不知道如何将两者联系起来。我尝试这样做，但javascript无法正常工作。

这是我在html标题中使用的链接

<script src="js/index_slide.js"></script>

这是我的文件index_slide.js的javascript

 <script type="text/javascript">
$(document).ready(function() {


    $('#bottom_logo').click(function(event) {
        event.preventDefault();

            var position = $('#main_div_wide_wrapper').position().left;
            var width = $( document ).width();
            var slide = ($('#main_div_wide_wrapper').position().left/$( document ).width()) *-1;


            if ( slide == '0') {

        }
        if ( slide == '1') {
            $('#main_div_wide_wrapper').animate({
                'left' : '+=100%' //moves left
                });
        } 
        if ( slide == '2') {
            $('#main_div_wide_wrapper').animate({
                'left' : '+=200%' //moves left
                });
        } 
        if ( slide == '3') {
            $('#main_div_wide_wrapper').animate({
                'left' : '+=300%' //moves left
                });
        }
        if ( slide == '4') {
            $('#main_div_wide_wrapper').animate({
                'left' : '+=400%' //moves left
                });
        }



    });//end bottom_logo

     $('#about').click(function(event) {
     event.preventDefault();

            var position = $('#main_div_wide_wrapper').position().left;
            var width = $( document ).width();
            var slide = ($('#main_div_wide_wrapper').position().left/$( document ).width()) *-1;

            if ( slide == '0') {
                $('#main_div_wide_wrapper').animate({
                'left' : '-=100%' //moves left
                });

        }
        if ( slide == '1') {

        } 
        if ( slide == '2') {
            $('#main_div_wide_wrapper').animate({
                'left' : '+=100%' //moves left
                });
        } 
        if ( slide == '3') {
            $('#main_div_wide_wrapper').animate({
                'left' : '+=200%' //moves left
                });
        }
        if ( slide == '4') {
            $('#main_div_wide_wrapper').animate({
                'left' : '+=300%' //moves left
                });
        }

    });//end about

    $('#services').click(function(event) {
        event.preventDefault();

            var position = $('#main_div_wide_wrapper').position().left;
            var width = $( document ).width();
            var slide = ($('#main_div_wide_wrapper').position().left/$( document ).width()) *-1;


            if ( slide == '0') {
                $('#main_div_wide_wrapper').animate({
                'left' : '-=200%' //moves left
                });

        }
        if ( slide == '1') {
            $('#main_div_wide_wrapper').animate({
                'left' : '-=100%' //moves left
                });
        } 
        if ( slide == '2') {

        } 
        if ( slide == '3') {
            $('#main_div_wide_wrapper').animate({
                'left' : '+=100%' //moves left
                });
        }
        if ( slide == '4') {
            $('#main_div_wide_wrapper').animate({
                'left' : '+=200%' //moves left
                });
        }



    });//end services

    $('#designs').click(function(event) {
        event.preventDefault();

            var position = $('#main_div_wide_wrapper').position().left;
            var width = $( document ).width();
            var slide = ($('#main_div_wide_wrapper').position().left/$( document ).width()) *-1;


            if ( slide == '0') {
                $('#main_div_wide_wrapper').animate({
                'left' : '-=300%' //moves left
                });

        }
        if ( slide == '1') {
            $('#main_div_wide_wrapper').animate({
                'left' : '-=200%' //moves left
                });
        } 
        if ( slide == '2') {
            $('#main_div_wide_wrapper').animate({
                'left' : '-=100%' //moves left
                });
        } 
        if ( slide == '3') {

        }
        if ( slide == '4') {
            $('#main_div_wide_wrapper').animate({
                'left' : '+=100%' //moves left
                });
        }



    });//end designs

    $('#contact').click(function(event) {
        event.preventDefault();

            var position = $('#main_div_wide_wrapper').position().left;
            var width = $( document ).width();
            var slide = ($('#main_div_wide_wrapper').position().left/$( document ).width()) *-1;


            if ( slide == '0') {
                $('#main_div_wide_wrapper').animate({
                'left' : '-=400%' //moves left
                });

        }
        if ( slide == '1') {
            $('#main_div_wide_wrapper').animate({
                'left' : '-=300%' //moves left
                });
        } 
        if ( slide == '2') {
            $('#main_div_wide_wrapper').animate({
                'left' : '-=200%' //moves left
                });
        } 
        if ( slide == '3') {
            $('#main_div_wide_wrapper').animate({
                'left' : '-=100%' //moves left
                });
        }
        if ( slide == '4') {

        }



    });//end contact


});
</script>

如何在其他文件中使javascript工作？

Answer 1

您可以删除

 <script type="text/javascript">

和底部</script> 来自.js文件

Answer 2

1）你必须链接jquery
2）删除* index_slide.js *
中的脚本标签 3）不要忘记在脚本之前放置jQuery链接。

如何正确链接Javascript到html页面

2 个答案: