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