动态html页面导航

Dynamic html page navigation

本文关键字：导航 html 动态      更新时间：2023-09-26

好的，我看过这个教程http://css-tricks.com/dynamic-page-replacing-content/，其实很酷！我的问题是，作为流，我有一个页面，不仅有内容，还有特定的javascript内容和css。有没有一种方法可以动态加载这些文件，这是正确的？如果我在页面上有一个硬编码的，我该如何加载那个css/js脚本？

提前谢谢。

[编辑]

部分代码：

<html>
<head>
<script type="text/javascript" src="..."></script>
<script type="text/javascript">
$(document).ready(
    alert('the document has finished loading!!');
    // do form validation and send
)
</script>
</head>
<body>
Please Full the necesary (*) Fields
<form method="post" action="testing.php" id="test" name="test">
    (*)<input type="text" name="fullname" />
    <input type="submit" value="Send" />    
</form>
</body>
</html>

假设我想动态加载该页面，并加载放置在页眉上的验证和相关javascript。是否应该加载正在读取标头的文件？我怎么知道哪一个已经加载了？

谢谢你的回答！

"我猜他指的是硬编码的静态。–Utkanos"-编辑的

您可以通过更改href属性来动态更改CSS样式表。Javascript也可以通过将脚本self加载到div或将脚本src写入div来动态加载

这里有一个简单的例子：

CSS 1:

body {
    background: black;
    color: #333;
}

CSS 2:

body {
    background: red;
    color: white;
}

HTML:

<html>
    <head>
        <title>Test page</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
        <link href="/includes/css/test1.css" rel="stylesheet" type="text/css" />  
    </head>
    <body>
        <h1>TEST!!!!!</h1>
        <div id="code"></div>
        <input type="button" id="but" value="click!" />
        <script>
            var css = 1;
            $('#but').click(function() {
                if(css == 1) {
                    css = 2;
                } else {
                    css = 1;
                }
                $('link').attr('href', '/includes/css/test' + css + '.css');               
                //test();
                test2();
            });
            function test2() {
                $('#code').html("<script>alert('"It works!!!'");<'/script>");
                //Or parse the src 
                //$('#code').html("<script src='"js/your_js_file.js"><'/script>")
            }
        </script>
    </body>
</html>

因此，可以在页面加载后将CSS和Js加载到页面中。

希望这能有所帮助！

相关文章：