使用JavaScript自动更新导航栏

时间:2014-06-23 17:17:36

标签: 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.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">\
');
 });

谢谢

1 个答案:

答案 0 :(得分:1)

jQuery .addClass()可能是您正在寻找的方法。只需添加一个&#34; active&#34;或类似于正在查看的导航项目。

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