Как добавить класс в тег тела с помощью jQuery?

Позвольте мне уточнить мой вопрос и решение, которое я ищу. Я использую wikispaces.com, и я хотел бы динамически добавлять уникальный класс тела для каждой страницы, используя jQuery, который каким-то образом захватывает URL-адрес, а затем вставляет этот уникальный класс тела, который будет применяться специально и только для этой страницы.Как добавить класс в тег тела с помощью jQuery?

Итак, вот пример URL из моего Wikispace ...

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

Я хотел бы, чтобы JQuery, чтобы захватить ... скажем, первое слово после .com /, который на этой странице был бы аудио. Таким образом, JQuery мне нужно будет применить класс аудио в тег тела, как так ...

<body class="audio">

В своей документации, любой Jquery может быть вставлен, так как он будет загружен по умолчанию. Но они уточняют, говоря, что вместо знака $, используемого в jQuery, он будет работать только в wikispaces, если вместо этого вы используете слово jQuery. Как это ...

jQuery(document).ready(function(){

Я очень ценю любую помощь, которую вы можете дать мне, чтобы заставить ее работать. Благодаря!

источник

2010-01-07 Spencer B.

Это уверен чувствует себя чем-то, что лучше управляется на стороне сервера. –

wikispaces, по-видимому, является размещенным/предоставленным решением, поэтому решение на стороне сервера не похоже на выбор ... – Funka

Не уверен, что ваши ограничения в размещении кода. Я бы просто поместил это в <head> вашего документа и применил класс к элементу html вместо body, чтобы вы не получили FOUS или «Flash of Unstyled Content». Класс «присутствует» на элементе почти сразу после загрузки страницы, но прежде, чем он показывает, если вы делаете это так:

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

источник

2010-01-07 03:36:15

Спасибо, Дуг. Я попробовал свой код выше, вставив его в . Я нажал на другую страницу в своем wikispace и Viewed Source, чтобы узнать, был ли класс прикреплен к тегу , и его не было. Я также проверил, был ли ваш код в теге , и это не так. Итак, я предполагаю, что у них может быть ограничение на использование javascript в файлах шаблонов. У них также есть встроенный виджет, в котором говорится, что вы можете разместить jQuery или любой другой HTML или Javascript, и он тоже не работает. Embed Widget - это инструмент, который применяет все, что вы там вложили ... –

... в основную область содержимого. Я использовал jQuery внутри там раньше для выпадающего меню, скользящего аккордеона, и это сработало. Не уверен, почему этот фрагмент кода не будет работать. Мне интересно, нужно ли мне преобразовать все знаки $ в слово jQuery, как говорится в их документации. –

Эй, @Spencer, все, что изменилось через javascript (в этом случае добавление класса), никогда не появится, когда вы «смотрите источник», поскольку источником является то, что было отправлено с сервера. Когда вы используете Embed Widget, можете ли вы хотя бы увидеть блок сценария в HTML? Если это так, он должен работать. Загрузите FireBug для Firefox (http://getfirebug.com) и используйте его «HTML», чтобы просмотреть динамически добавленные классы, чтобы проверить его работу. –

Regular JavaScript:

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

});

источник

2010-01-07 03:29:27 slebetman

Итак, я бы включил это перед тегом или перед тегом в файле шаблона и затем скопируйте свой код выше и вставьте его вот так: Это правильно? Извините, не знаю слишком много о javascript. Знать LOTS о CSS ... –

Да, используйте в теге '' внутри тега '

Как добавить класс в тег тела с помощью jQuery?

ответ

Смежные вопросы