如何使用jQuery向HTML文档中的body标签添加class类？

Question

如何使用jQuery向HTML文档中的body标签添加class类？

jqueryclassurl

4

让我澄清我的问题和我正在寻找的解决方案。我正在使用wikispaces.com，并且我想使用jQuery动态添加每个页面的唯一body类，该类以某种方式获取URL，然后插入该唯一body类，该类仅适用于该页面而不是其他页面。

因此，这是来自我的wikispace的示例URL...

http://wikithemes.wikispaces.com/Audio+Page

我希望jQuery能够获取...比如在此页面上，位于.com/之后的第一个单词，这个单词是audio。所以，我需要的jQuery会将类audio应用到body标签上，如下所示...

<body class="audio">

在他们的文档中，任何jQuery都可以被插入，因为它默认加载。但是他们澄清说，在wikispaces中，如果您使用单词jQuery代替$符号，它才能正常工作。就像这样...

jQuery(document).ready(function(){

我非常感谢您在让这个工作起来方面所能提供的任何帮助。谢谢！

- Spencer B.

3

这似乎更适合在服务器端进行管理。 - Peter Rowell

2

Wikispaces似乎是一种托管/提供的解决方案，因此服务器端解决方案似乎不是一个选项... - Funka

2个回答

0

普通的JavaScript：

jQuery(document).ready(function(){
    var urlPath = window.location.pathname;
    document.body.className = urlPath.match(/\/(.*?)(\+|$)/)[1].toLowerCase();

});

- slebetman

所以，我会在模板文件的</head>标签或</body>标签之前包含它，然后将您的代码复制并像这样插入它...<script type="text/javascript"> document.body.className = window.location.pathname.match(//(.*?)(+|$)/)[1]; </script> 这样正确吗？抱歉，我不太了解JavaScript。对CSS非常了解... - Spencer B.

是的，在jQuery准备好函数中包含一个包装在<script>标签内的<head>标记中。为了清晰起见，在示例中添加了jQuery包装器。 - slebetman

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Doug Neiner · Accepted Answer

不确定您在放置代码时的限制。我建议将其放在文档的<head>中，并将类应用于html元素而不是body元素，以便您不会遇到FOUS或"未样式化内容的闪烁"问题。如果您按照这种方式操作，则该类几乎会在页面加载后立即出现在元素上，但在显示之前。

<script type="text/javascript">
    var loc = window.location.pathname.match(/^\/?(\w+)\b/);
    // document.documentElement is the html element, this adds the class
    if(loc) document.documentElement.className += " " + loc[1].toLowerCase();
</script>

如果您真的想使用jQuery：

<script type="text/javascript">
    // jQuery is passed to the ready function as a parameter, so we alias it with $
    // This will work for you even with wikispaces
    jQuery(function($){
        var loc = window.location.pathname.match(/^\/?(\w+)\b/);
        if(loc) $(document.body).addClass(loc[1].toLowerCase());
    });
</script>