使用javascript添加css类到使用javascript实现的标头

问题描述：

我正在开发一个包含许多html文件的网站，最近我开始使用分离的页眉和页脚html文件，以便通过在页面中使用javascript实现它们以节省时间。问题是现在所有的页眉和页脚看起来都是一样的，而在使用这个方便的技术之前，我已根据页面高亮显示页面（这是通过手动将类添加到不同的<a>标记完成的，具体取决于页面（html文件）它是），但现在我找不到一种方法来针对特定的<a>，将只针对特定的HTML来改变它的CSS。该代码看起来是这样的： HTML home.html的：使用javascript添加css类到使用javascript实现的标头

<div id="header"></div>

HTML了header.html：

<ul> 
    <li id="LI_56"> 
       <a href="pages/home.html" id="A_57">Home</a> 
    </li> 
    </ul>

的Javascript看起来是这样的：

$(function(){ 
    $("#header").load("header.html"); 
    $("#footer").load("footer.html"); 
});

CSS是这样的：

.home{ 
background-color:red; 
}

什么我试图做的是：

  <script> 
      $(document).ready(function() { 
      document.getElementById('A_57').className = 'home'; 
      }); 
      </script>

，但我得到的错误： “类型错误：的document.getElementById（...）为空”。当头文件已经在我的home.html文件中，并且没有通过javascript实现时，一切正常，但这不是一个选项。希望任何人都知道解决方案。为每个html使用不同的css文件也显然不是一种选择 - 它应该是直截了当，开发者友好（智能&懒惰）尽可能！：）提前致谢！

也许你想解雇前的JavaScript函数加载一个？ –

函数应该在加载之后触发，但显然会发生相反的情况。我已经有了一个解决方案，虽然我希望能有更好的解决方案。 – Mkey

答

在一个“完整”的回调设置类名，这个回调是一直进行后处理和HTML插入后执行：

$(function(){ 
    $("#header").load("header.html", function() { 
     document.getElementById('A_57').className = 'home'; 
    }); 
    $("#footer").load("footer.html"); 
});

答

这是因为该元素尚不存在。加载html后添加类。

$(function(){ 
    $("#header").load("header.html", function() { 
     var $homeLink = $('#header').find('a').filter(function() { 
      return $.trim($(this).text()) === 'Home' 
     }); 

     $homeLink.addClass('home'); 
    }); 
    $("#footer").load("footer.html"); 
});

这是有效的，但我有很多不同的页面，这意味着我不得不在我的HTML页面中添加此脚本只是更改类名，但也许有一种方法，我可以在一个单独的.js文件中使用此脚本，只需更改这个js的类通过添加一些额外的.js到我的html页面，甚至这js可以适应并知道要设置哪个类取决于我的html页面名称或其他信息？ – Mkey

'header.html'是否总是包含您在上面发布的结构？这不是非常优化的代码，但我已经更新了我的答案以帮助解决这个问题。加载标题后，它会找到一个带有文本“Home”的锚点链接，并向该锚点链接添加一个“home”类。 – Jamy

使用javascript添加css类到使用javascript实现的标头

相关推荐