javascript - 如何正确地将 Javascript 链接到 html 页面

Question

我有曾经直接插入到我的 html 页面中的 javascript。它变得很大，我决定将它移到一个单独的文件中。但我不确定如何将两者联系起来。我尝试这样做，但 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 文件