使用JavaScript自動更新導航欄

Question

我正在編寫一個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.custom\css\purple_theme\jquery-ui-1.10.4.custom.css" />\
    <!--[if lte IE 8]>\
        <link rel="stylesheet" href="jquery-ui-1.10.4.custom\css\purple_theme\jquery-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">\
');
 });

謝謝

Answer 1

jQuery .addClass()可能是您正在尋找的方法。 只需向正在查看的導航項添加“活動”或類似的類。

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