如何重新连接 Javascript 文件答案

【问题标题】：How reconnect Javascript File如何重新连接 Javascript 文件
【发布时间】：2014-09-16 21:17:12
【问题描述】：

我有 index.html、Home.html 和 AboutUs.html

index.html：那是我页面的框架
Home.html：它有 1 个图像滑块
AboutUs.html：只有文本。

我的页面从 index.html 开始。加载后，我使用 jquery 将滑块的 html 代码从 Home.html 插入到 div。它正在工作。当我点击 About Us 时，我用 jQuery 从 AboutUs.html 更改了 div 中的 html 代码。它也可以正常工作。

但是当我点击返回主菜单时，滑块不起作用。 Javascript 文件已断开连接。

我在 index.html 链接了所有 Javascript 和 CSS 文件。

我的 index.html 和 Jquery 代码

<html>
<head>
    <title>IVORY:SAMPLE ONE</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css">
    <link href="css/js-image-slider.css" rel="stylesheet" type="text/css" />
    <script src="js/js-image-slider.js" type="text/javascript"></script>
    <script src="js/jquery.js" type="text/javascript"></script>
    <link href="css/generic.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">
        $(document).ready(function()
        {
            $('#control').load('Home.html #controlHome') ;

            $('#home').click(function () 
            { 
                $('#control').load('Home.html #controlHome') ;
            }); 
            $('#men').click(function () 
            { 
                $('#control').load('Men.html ') ;
            });
            $('#women').click(function () 
            {   
                $('#control').load('Women.html ') ;
            });
            $('#cosmetics').click(function () 
            {   
                $('#control').load('Cosmetics.html ') ;
            });
            $('#accessories').click(function () 
            {   
                $('#control').load('Accessories.html ') ;
            });
            $('#services').click(function () 
            {   
                $('#control').load('Services.html ') ;
            });
            $('#aboutus').click(function () 
            {   
                $('#control').load('AboutUs.html') ;
            }); 

        });
    </script>
</head>
<body>
    <div id="container">
        <div id="header">           
            <div id="sub_header">
                <h1 id="h1_aaa">I V O R Y - C O L L E C T I O N</h1>
                <br>

                <h2 style="font-family: Monotype Corsiva,sans-serif;font-size: 45;color: #c24678;padding-top:100px;" id="h2_bbb">Make Yours Dream Come True </h2>
                <div class="menu_div">
                    <ul id="menu-bar">
                        <div id="menu_div">
                            <li><a href="#" id="home">Home</a></li>
                            <li><a href="#" id="men">Men</a></li>
                            <li><a href="#" id="women">Women</a></li>
                            <li><a href="#" id="cosmetics">Cosmetics</a></li>
                            <li><a href="#" id="accessories">Accessories</a></li>
                            <li><a href="#" id="services">Services</a></li>
                            <li><a href="#" id="aboutus">About Us</a></li> 
                        </div>
                    </ul>
                </div>
            </div>
        </div>
        <div id="control">              
        </div>  
    </div>
</body>
</html>

【问题讨论】：

jQuery 可能需要先加载。重新排序<script> 标签
你确定点击“返回首页”后JavaScript没有错误吗？如果出现任何运行时错误，JavaScript 将被禁用。
我从 Home 链接中删除了“#”，现在它可以工作了。非常感谢你

标签： javascript jquery html css

【解决方案1】：

    <html>
<head>
    <title>IVORY:SAMPLE ONE</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css">
    <link href="css/js-image-slider.css" rel="stylesheet" type="text/css" />
    <script src="js/js-image-slider.js" type="text/javascript"></script>
    <script src="js/jquery.js" type="text/javascript"></script>
    <link href="css/generic.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">
        $(document).ready(function()
        {
            $('#control').load('Home.html #controlHome') ;

            $('#home').click(function () 
            { 
                $('#control').load('Home.html #controlHome') ;
            }); 
            $('#men').click(function () 
            { 
                $('#control').load('Men.html ') ;
            });
            $('#women').click(function () 
            {   
                $('#control').load('Women.html ') ;
            });
            $('#cosmetics').click(function () 
            {   
                $('#control').load('Cosmetics.html ') ;
            });
            $('#accessories').click(function () 
            {   
                $('#control').load('Accessories.html ') ;
            });
            $('#services').click(function () 
            {   
                $('#control').load('Services.html ') ;
            });
            $('#aboutus').click(function () 
            {   
                $('#control').load('AboutUs.html') ;
            }); 

        });
    </script>
</head>
<body>
    <div id="container">
        <div id="header">           
            <div id="sub_header">
                <h1 id="h1_aaa">I V O R Y - C O L L E C T I O N</h1>
                <br>

                <h2 style="font-family: Monotype Corsiva,sans-serif;font-size: 45;color: #c24678;padding-top:100px;" id="h2_bbb">Make Yours Dream Come True </h2>
                <div class="menu_div">
                    <ul id="menu-bar">
                        <div id="menu_div">
                            <li><a href="" id="home">Home</a></li>
                            <li><a href="#" id="men">Men</a></li>
                            <li><a href="#" id="women">Women</a></li>
                            <li><a href="#" id="cosmetics">Cosmetics</a></li>
                            <li><a href="#" id="accessories">Accessories</a></li>
                            <li><a href="#" id="services">Services</a></li>
                            <li><a href="#" id="aboutus">About Us</a></li> 
                        </div>
                    </ul>
                </div>
            </div>
        </div>
        <div id="control">              
        </div>  
    </div>
</body>
</html>

【讨论】：

【解决方案2】：

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/js-image-slider.js" type="text/javascript"></script>

脚本标签需要重新排序。

【讨论】：