Основной HTML с использованием JQuery для загрузки верхнего меню навигации, не наследуя стили

0

Я работаю на строго html-сайте для некоммерческой группы. Я хотел бы сделать один html файл и загрузить его через ajax .load() чтобы упростить будущие обновления. Программа .load() работает нормально, но выпадающие меню не работают, загружается только родительский уровень. Теперь, если я возьму загружаемую страницу (скопируйте и вставьте) вместо div, она отлично работает.

Вот меню/страница, загружаемая через ajax:

    <div class="navbar navbar_ clearfix">
    <div class="navbar-inner">
        <div class="nav-collapse nav-collapse_ collapse">
            <ul class="nav sf-menu clearfix">
                <li class="sub-menu"><a href="/adoptions.htm">Adopt</a>
                    <ul>
                        <li><a href="/adopt_a_cat.htm">Adopt a Cat</a></li>
                        <li><a href="/adopt_a_dog.htm">Adopt a Dog</a></li>
                        <li><a href="/vips.htm">VIPs</a></li>
                    </ul>
                </li>
                <li class="sub-menu"><a href="/donate_help.htm">Donate/Help</a>
                    <ul>
                        <li><a href="/make_a_donation.htm">Make A Donation</a></li>
                        <li><a href="/our_wish_list.htm">Our Wish List</a></li>
                        <li><a href="/volunteer.htm">Volunteer</a></li>
                        <li><a href="/virtual_foster.htm">Virtual Foster</a></li>
                        <li><a href="/be_a_voice.htm">Be A Voice</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>

Вот вызов jquery ajax (не получается проще):

$('#topNavBar').load('includes/_topNavBar.htm');

И вот тег div, содержимое которого загружается (если не жестко закодировано):

<div id="topNavBar"></div>

Я действительно устал, отпрыгивая от клавиатуры; html, загруженный через ajax, должен наследовать существующий стиль, но это не так. Я надеюсь, что ответ здесь где-то, и я просто пропустил его.

  • 1
    Подружитесь с инструментами разработчика в вашем любимом браузере. Вы обнаружите проблему в кратчайшие сроки. (Без скрипки нет ничего более конкретного, чтобы сказать.)
  • 0
    Вы пытались скрыть div, пока загрузка не закончится и не поместит в него html-контент?
Показать ещё 2 комментария
Теги:

1 ответ

0
Лучший ответ

Я не могу воспроизвести вашу проблему. Поэтому мои предложения для вас

1) убедитесь, что загрузка AJAX() происходит после полной загрузки стилей и элементов HTML:

<html>
    <head>
        <title>Test</title>
        <script src="jquery-2.1.0.min.js"></script>
        <link href="style.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
        <div id="topNavBar"></div>

        <script type="text/javascript">    
            $('#topNavBar').load('_topNavBar.html');
        </script>
    </body>
</html>

или проверьте событие $ (document).ready(), чтобы дождаться загрузки страницы.

2) проверьте, что присвоение соответствующего класса во время выполнения в консоли разработчика по вашему выбору ничего не меняет (например, $ ('# topNavBar> div'). AddClass ("navbar")). Если это не так, вы можете найти свою проблему в своем CSS, например, с помощью программного обеспечения с ошибками.

Поделиться
  • 0
    При ближайшем рассмотрении, есть класс, который НЕ применяется при наведении мыши на меню навигации, поэтому выпадающие элементы не применяются. У меня есть .load, возникающая в документе, готова и все еще не работает, как ожидалось. (стили загружаются вверху документа, а файлы .js внизу).
  • 0
    Вы пытались использовать консоль в соответствии с рекомендациями других? Вы можете увидеть структуру документа, как он загружен в DOM. После загрузки страницы вы можете увидеть все элементы вашего "_topNavBar.htm" как дочерние элементы вашего "topNavBar" DIV? Если да, ваша проблема, вероятно, не имеет ничего общего с вызовом AJAX. Внимательно посмотрите на свой CSS, возможно, в именах или в селекторах, которые вы использовали, может быть несоответствие.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню