Làm cách nào để thay đổi nội dung động trong html?

Bài viết này là bản cập nhật cho bài viết cũ này, bài viết có bản trình diễn xấu xí và nhiều kỹ thuật trong đó có lẽ không còn được coi là phương pháp hay nữa. Bản trình diễn mới này rõ ràng hơn, cập nhật hơn và đầy đủ tính năng hơn. Vì bài cũ phạm vi hơi khác nên mình bỏ qua, chỉ tham khảo bài này thôi

Cập nhật tháng 1 năm 2013. Hiện có các phương pháp hay hơn, chi tiết tại đây

Giả sử bạn muốn tạo một trang web mà việc nhấp vào các nút trong điều hướng sẽ tự động tải một số nội dung. Giống như tab không phải trả tiền, chỉ nội dung được tải động. Nói điều gì đó như thế này

Home

CSS

Đây không thực sự là một hướng dẫn về CSS, nhưng nếu bạn muốn xem qua nó, hãy tìm nó. Gửi lời cảm ơn đến Mike Rundle, người đã chia sẻ CSS cho các nút đó vào ngày hôm trước trên Twitter khi tôi đang làm việc này và tôi đã đánh cắp nó

jqueryjavascript

JavaScript là phần thú vị ở đây. Đây là kế hoạch bằng tiếng Anh đơn giản

1. Khi một nút điều hướng được bấm…
2. Thay đổi thẻ băm của URL
3. Khi thẻ băm trong URL thay đổi…
4. Làm mờ nội dung cũ
5. Tải và mờ dần trong nội dung mới
6. Cập nhật đánh dấu điều hướng hiện tại

Vậy tại sao phải bận tâm với những thứ thay đổi “hash tag”?

• Bằng cách sử dụng plugin sự kiện hashchange của Ben Alman, chúng tôi có thể kích hoạt nút tiến/lùi của trình duyệt. Các trình duyệt siêu hiện đại tự hỗ trợ sự kiện hashchange, plugin này cho phép hỗ trợ nó cho các trình duyệt cũ hơn
• Chúng tôi có thể tìm kiếm hàm băm khi tải trang và tải trang thích hợp [i. e. “liên kết sâu”]

điều kiện tiên quyết

Chúng tôi sẽ sử dụng thư viện jQuery, plugin onhashchange, sau đó tải tập lệnh của riêng chúng tôi lần cuối

kết xuất mã

$[function[] {

    var newHash      = "",
        $mainContent = $["#main-content"],
        $pageWrap    = $["#page-wrap"],
        baseHeight   = 0,
        $el;
        
    $pageWrap.height[$pageWrap.height[]];
    baseHeight = $pageWrap.height[] - $mainContent.height[];
    
    $["nav"].delegate["a", "click", function[] {
        window.location.hash = $[this].attr["href"];
        return false;
    }];
    
    $[window].bind['hashchange', function[]{
    
        newHash = window.location.hash.substring[1];
        
        if [newHash] {
            $mainContent
                .find["#guts"]
                .fadeOut[200, function[] {
                    $mainContent.hide[].load[newHash + " #guts", function[] {
                        $mainContent.fadeIn[200, function[] {
                            $pageWrap.animate[{
                                height: baseHeight + $mainContent.height[] + "px"
                            }];
                        }];
                        $["nav a"].removeClass["current"];
                        $["nav a[href='"+newHash+"']"].addClass["current"];
                    }];
                }];
        };
        
    }];
    
    $[window].trigger['hashchange'];

}];

Không có gì nhiều cho nó thực sự. Nó chỉ có 41 dòng với một số khoảng trống trong đó để dễ đọc. Điều này thậm chí bao gồm điều chỉnh chiều cao của toàn bộ trình bao bọc để điều chỉnh nội dung mới

Đây là cách đơn giản nhất để tự động sửa đổi nội dung- sử dụng thuộc tính innerHTML. Bằng cách sử dụng thuộc tính này, được hỗ trợ trong tất cả các trình duyệt hiện đại, chúng tôi có thể gán HTML hoặc văn bản mới cho bất kỳ phần tử ngăn chặn nào [chẳng hạn như

hoặc ], và trang được cập nhật và chỉnh lại dòng ngay lập tức để hiển thị nội dung mới.

Dưới đây là các thuộc tính nội dung động

Thuộc tính nội dung động bên trongHTMLNội dung đầy đủ [bao gồm các thẻ HTML, nếu có] của một phần tử. Được hỗ trợ trong tất cả các trình duyệt. InternalTextNội dung văn bản hoàn chỉnh của một phần tử. Không chuẩn, chỉ được hỗ trợ trong IE. textContentTương tự như thuộc tính innerText độc quyền của IE ở trên, textContent nhận hoặc đặt nội dung văn bản của một phần tử. Nó khác với innerText ở những điểm sau