如何使用jQuery添加类到Body标签? [英] How Can I Add a Class to the Body Tag using jQuery?

查看:1266
本文介绍了如何使用jQuery添加类到Body标签?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

让我澄清我的问题,以及我正在寻找的解决方案。我使用wikispaces.com,我想为每个页面使用jQuery动态添加一个唯一的主体类,以某种方式获取URL,然后插入将专门应用于该页面的唯一主体类。 p>

所以,这里是一个例子从我的wikispace的URL



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



我想让jQuery抓住...让我们说.com /之后的第一个单词,在这个页面上会是音频。所以,jQuery我需要应用类 audio 到body标签,像这样...

 < body class =audio> 

在他们的文档中,任何jQuery都可以插入,因为它默认加载。但是他们澄清说,而不是在jQuery中使用的$符号,它将只在wikispaces中工作,如果你使用 jQuery 这个词。像这样...

  jQuery(document).ready(function(){



我真的很感激你能帮我把这个工作给你。

解决方案

不知道您在放置代码时的限制,我只需将它放在您的文档的< head> 该类为 html 元素而不是 body 所以你不会得到一个 FOUS 或Flash of Unstyled Content。该类在页面加载后几乎立即在元素上存在,但是在显示之前如下:

 < script type =text / javascript> 
var loc = window.location.pathname.match(/ ^ \ /? \\ w +)\b /);
// document.documentElement是html元素,这会添加类
if(loc)document.documentElement.className + =+ loc [1]。 toLowerCase();
< / script>



如果你真的想使用jQuery:

 < script type =text / javascript> 
// jQuery被传递给ready函数作为参数,所以我们用$ $ b别名它
//这将适用于wikispaces
jQuery(function($){
var loc = window.location.pathname.match(/ ^ \ /?(\w +)\b /);
if(loc)$(document.body).addClass ] .toLowerCase());
});
< / script>


Let me clarify my question, and the solution I'm looking for. I'm using wikispaces.com, and I would like to dynamically add a unique body class for every page using jQuery that somehow grabs the URL, and then inserts that unique body class that would be applied specifically and only for that page.

So, here's an example url from my wikispace...

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

I'd like the jQuery to grab... let's say the first word after the .com/, which on this page would be audio. So, the jQuery I need would apply the class audio to the body tag, like so...

<body class="audio">

In their documentation, any jQuery can be inserted since it is loaded by default. But they clarify in saying that instead of the $ sign used within jQuery, it will only work within wikispaces if you use the word jQuery instead. Like this...

jQuery(document).ready(function(){

I really appreciate any help you can give me on getting this to work. Thanks!

解决方案

Not sure what your restrictions are in placing code. I would just put this in the <head> of your document and apply the class to the html element instead of body so you don't get a FOUS or "Flash of Unstyled Content". The class is "present" on the element almost immediately after the page loads, but before it displays if you do it this way:

<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>

If you really want to use 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>

这篇关于如何使用jQuery添加类到Body标签?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆