Блог

Главная - Вопросы по программированию - Автоматическое обновление панели навигации с помощью JavaScript

Автоматическое обновление панели навигации с помощью JavaScript

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

Я пишу файл JavaScript, который позволит веб-страницам автоматически иметь тот же контент, который требуется для всех других веб-страниц на моем сайте. Проблема в том, что панель навигации должна автоматически добавлять отключенный класс к ссылкам, которые относятся к просматриваемой веб-странице. Я не уверен, как это сделать, и я не могу найти хорошее решение нигде в Интернете. вот мой код на данный момент. Я концентрируюсь на разделе «навигация»

  $(document).ready(function() {
$('#initiate').append('
    <link rel="icon" href="img/favicon.png" />
    
    <!--Style data-->
    <!-- -- jQuery -- -->
    <link rel="stylesheet" href="jquery-ui-1.10.4.customcsspurple_themejquery-ui-1.10.4.custom.css" />
    <!--[if lte IE 8]>
        <link rel="stylesheet" href="jquery-ui-1.10.4.customcsspurple_themejquery-ui-1.10.4.custom.min.css" />
    <![endif]-->
    
    <!--jQuery data-->
    <script src="jquery-ui-1.10.4.custom/development-bundle/jquery-1.10.2.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    <script type="text/JavaScript" src="jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.js"></script>
    <script type="text/JavaScript" src="js/script.js"></script>
    ');
//remember to check the pages that need to updated from being disabled
$('#navigate').append('
    <div class="ui-widget">
        <div style="width: 15%; display: inline-block; float: left">
            <ul class="navbar">
                <h4 style="color: white">Resources</h4>
                <li id="home" title="Home Page"><a href="index.html">Home</a></li>
                <li id="beta" title="Test Out our services"><a href="beta">Beta Test</a></li>
                <li id="alert" class="ui-state-disabled" title="Not Yet Available"><a href="#serviceAlert">Sign Up</a></li>
                <li id="question"title="Have a question or confused? Click here"><a href="questions">Questions</a></li>
                <li id="privacy" title="Learn about our policies to protect your information"><a href="privacy" >Privacy</a></li>
                <li id="about" title="Learn about MHER"><a href="about">About</a></li>
                <li id="hippa" class="ui-state-disabled" title="Coming Soon!"><a href="#comingSoon">HIPPA Blog</a></li>
                <h4 style="color: white">Health Law</h4>a
                <li><a href="http://thomas.loc.gov/cgi-bin/query/z?c104:H.R.3103.enr:" target="_newtab">HIPPA Law</a></li>
                <li><a href="http://thomas.loc.gov/cgi-bin/query/z?c111:H.R.3590.as:" target="_newtab">ACA</a></li>
            </ul>
        </div>
    </div>
    <div style="width: 80%; display: inline-block; margin-left: 5px">
        <div class="ui-widget-header" style="border-radius: 10px">
');
 });

Спасибо

Ответ №1:

jQuery .addClass() может быть тем методом, который вы ищете. Просто добавьте «активный» или аналогичный класс к просматриваемому элементу навигации.

http://api.jquery.com/addclass/

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

1. Как мне это сделать при условии, что просматриваемая веб-страница соответствует веб-ссылке, требующей класса?

2. У вас может быть оператор switch, основанный на чем-то уникальном в файле, например, на его названии.

3. Хорошо, я попробую, могу ли я получить заголовок страницы, закодировав переменную следующим образом: var title = $(‘title);

4. Вы можете просто использовать document.title. 🙂