Наверное многие заметили, что на главной странице форума невозможно выделить какую-либо из тем другим цветом, это происходит из-за того, что все ссылки имеют один и тот же класс
Пример:
Code
<a class="forum" href="http://webik.at.ua/forum/25">Курилка</a>
.....
<a class="forum" href="http://webik.at.ua/forum/42">Обмен мнениями...</a>
.....
<a class="forum" href="http://webik.at.ua/forum/4">Неполадки на сайте</a>
как мы видим все ссылки имеют один и тот же класс - class="forum"
и если к этому классу в CSS прописать цвет
Пример:
Code
.forum { color: red; }
то изменятся коснутся всех ссылок без исключения.
Так как же быть?
На самом деле всё очень просто, с помощью jQuery мы обратимся прямо к содержимому ссылки, т.е. к тексту, обернём его в тег span и уже к нему применим нужные нам стили.
Итак, у нас есть тема "Правила", которую нам надо выделить красным цветом, изначально ссылка выглядит так:
Code
<a class="forum" href="http://webik.at.ua/forum/52">Правила</a>
перед закрывающим тегом body ставим следующий код:
Code
<script language="javascript">
// Выделяем тему форума
$("a.forum:contains('Правила')").wrapInner($("<span style='color:red;'></span>"));
</script>
Пояснения по коду:
Code
$("a.forum:contains('Правила')") - среди всех ссылок с классом forum ищем ту которая содержит текст Правила
далее:
Code
.wrapInner($("<span style='color:red;'></span>")); - заключаем найденный текст в тег span
В итоге после этих манипуляций наша ссылка уже изменилась (добавился тег span):
Code
<a class="forum" href="http://webik.at.ua/forum/52"><span style="color:red;">Правила</span></a>
Такие нехитрые манипуляции помогают нам достичь нужных результатов.
P.s.
Описание темы меняется точно также, изменяем только класс a.forum на div.forumDescr, в итоге получаем:
Code
<script language="javascript">
// Выделяем описание темы форума
$("div.forumDescr:contains('Обязательны к прочтению...')").wrapInner($("<span style='color:#00BFFF;'></span>"));
</script>
Объединяем в одно целое:
Code
<script language="javascript">
// Выделяем тему и описание форума
$("a.forum:contains('Правила')").wrapInner($("<span style='color:red;'></span>"));
$("div.forumDescr:contains('Обязательны к прочтению...')").wrapInner($("<span style='color:#00BFFF;'></span>"));
</script>
