Блог

Главная - Вопросы по программированию - Проблема с использованием HTML-файла в качестве шаблона для других HTML-файлов с использованием jQuery

Проблема с использованием HTML-файла в качестве шаблона для других HTML-файлов с использованием jQuery

#html #jquery

Вопрос:

Я пытаюсь выполнить упражнение. В этом упражнении вы создаете четыре файла: index.html, home.html, about.html, и contact.html. Используя jQuery .функция загрузки, вы должны быть в состоянии использовать index.html в качестве шаблона и загрузите в него другие файлы (все еще видя index.html навигационная панель). Вместо этого происходит то, что другие html-файлы, похоже, полностью заменяют index.html в браузере. Я не могу понять, почему. Я следую инструкциям по упражнению.

Вот код:

index.html

     <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Multi-Page Site amp; Template</title>
    </head>
    <body>
        <nav>
            <a href="home.html">Home</a>
            <a href="about.html">About</a>
            <a href="contact.html">Contact</a>
        </nav>
        <h1>Index Page</h1>
        Here is where the Index Page is.
        <div id="content">
        </div>
        <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256- 
        u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
        <script>
            $(function() {
                $("#content").load("home.html");
                $("nav a").click(function() {
                    var href = $(this).attr("href");
                    $("#content").load(href);
                    return false;
                });
            });
        </script>
    </body>
    </html>

home.html

     <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Home Page</title>
    </head>
    <body>
        <h1>Home Page</h1>
        <p>
            This is the home page. All content has been edited for brevity.
        </p>
    </body>
    </html>

about.html

     <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>About Page</title>
    </head>
    <body>
        <h1>About Page</h1>
        <h2>Things to know about the About Page</h2>
        <ol>
            <li>It's named About Page</li>
            <li>It has no styling</li>
            <li>It's very short</li>
        </ol>
    </body>
    </html>

contact.html

     <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Contact Page</title>
    </head>
    <body>
        <h1>Contact Page</h1>
        <table>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>Billy</td>
                <td>Blazer</td>
                <td>41</td>
            </tr>
        </table>
    </body>
    </html>

В упражнении говорилось, что возвращаемое значение false должно было предотвратить замену других страниц index.html. Почему это не работает или что еще не так с кодом?

Спасибо!

Ответ №1:

Пожалуйста, измените свой код на код ниже: Таким образом, тип=»тип/html» будет изменен на тип=»текст/html».

 $(function() {
     $("nav a").click(function() {
        var href = $(this).attr("href");
        $("#content").html('<object type="text/html" data="'  href  '">        
         </object>');
        return false;
      });
  });

Комментарии:

1. Вы должны объяснить, почему оригинал не сработал, что вы сделали по-другому и почему ваш работает. «Скопируйте/вставьте это» не очень полезно.

2. В моем ответе тип=»тип/html» изменен на тип=»текст/html».

3. Вам следует отредактировать свой вопрос, чтобы добавить эту информацию. Комментарии могут быть легко удалены.

4. Спасибо за ваше предложение. Я добавляю это.

5. Вы говорите, что обновили type="type/html" , но я не вижу этого нигде в исходном коде, поэтому он кажется добавленным, а не обновленным. Я тоже ничего не вижу <object></object> в исходном коде, так что ваше объяснение выглядит немного странным. Похоже, вы добавили кое-что и ничего из этого не упомянули.

Метки: