動態HTML頁面導航

Question

好的，我看到了本教程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”-編輯

Answer 1

您可以通過更改href屬性來動態更改CSS樣式表。 也可以通過將腳本自身加載到div中或將腳本src寫入其中來動態加載Javascript。

這里有個簡單的例子：

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加載到頁面中。

希望這可以幫助！

動態HTML頁面導航

問題描述

1 個解決方案

解決方案1
0 2012-07-13 14:16:24

動態HTML頁面導航

問題描述

1 個解決方案

解決方案1 0 2012-07-13 14:16:24

解決方案1
0 2012-07-13 14:16:24