Изменение стилей заголовка при клике по ссылке

@Даниил Тёмин · Регистрация: 04.08.2011

Студворк — интернет-сервис помощи студентам

Есть ссылка <a href...> на якорь <a name...> на странице html, размещённая на изображении посредством тега map. Якорь <a name...> закреплён на неком заголовке в таблице.

Вопрос: можно ли сделать так, чтоб при нажатии/наведении на ссылку <a href...>, ведущую на якорь (a name...), данный заголовок (сам якорь <a name...>) менял цвет/выделялся/мигал и.т.п.?

Уточнение: я знаю, как сделать что-то подобное с ссылкой (<a href...>), это делается через атрибуты css, задаваемые для тега а. Но мне нужно изменение самого якоря <a name...> при наведении/нажатии на ссылку <a href...>

Итак, возможно ли это, и если да, то как это реализовать?

@boilzzz · 30.05.2016, 20:41

Даниил Тёмин, как то так? https://jsfiddle.net/8y7a0u7p/1/
Нажатием https://jsfiddle.net/8y7a0u7p/2/

@mrtoxas · 30.05.2016, 20:42

Если я правильно понял задачу, то это делается при помощи псевдокласса :target

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<div class="container">
            <nav>
                <ul>
                    <li><a href="#section-1">Section 1</a></li>
                    <li><a href="#section-2">Section 2</a></li>
                    <li><a href="#section-3">Section 3</a></li>
                    <li><a href="#section-4">Section 4</a></li>
                </ul>
            </nav>
            <section id="section-1">
                <h1>Section 1</h1>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis sed laboriosam cum quisquam unde consequuntur tenetur similique maiores obcaecati. Dignissimos, suscipit non perferendis doloremque tenetur aliquid ipsa! Minima, unde, eligendi.
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, architecto, culpa, delectus magnam asperiores molestias atque impedit veniam soluta perferendis maxime deserunt quibusdam sequi totam fuga doloremque non perspiciatis ab?
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque error optio autem architecto nostrum? Nobis in ducimus dignissimos provident ratione vel impedit? Rerum odit beatae accusantium debitis nisi non hic.
                </p>
            </section>
            <section id="section-2">
                <h1>Section 2</h1>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, porro amet tenetur deserunt aliquid vitae reprehenderit nihil ea! Debitis, vel, minus adipisci labore pariatur sapiente similique illum alias dicta itaque.
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, fugiat, architecto, veritatis quam laboriosam consectetur eius rem dicta dolore aspernatur deserunt magnam excepturi eaque culpa accusantium harum recusandae quaerat vel!
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, iusto, at, aperiam tempora reprehenderit nesciunt repellendus amet ullam incidunt nemo praesentium consequatur blanditiis laborum. Modi reprehenderit et fugiat voluptatibus ab!
                </p>
            </section>
            <section id="section-3">
                <h1>Section 3</h1>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, saepe, molestias, nisi voluptatum modi sit commodi pariatur recusandae aut veniam obcaecati quia quod laborum natus aspernatur atque repellendus porro ratione.
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, nemo magnam vero ea eos porro laboriosam ad soluta nobis consectetur corporis est blanditiis at saepe officiis cupiditate assumenda eaque placeat!
                </p>
            </section>
            <section id="section-4">
                <h1>Section 4</h1>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam sed illo dolorem. Voluptate, tenetur quaerat perferendis velit magni neque cupiditate a minima dicta pariatur eveniet mollitia earum similique libero repellendus!
                </p>
            </section>
        </div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  font-family: 'Lato', sans-serif;
}
hr {
    margin: 50px 0;
}
.container {
    margin: 40px auto;
    width: 75%;
}
.element {
    padding:20px;
} 
a {
    color: #8CC152;
}
ul {
    list-style: none;
    padding-left:0;
}
nav {
    background-color: #fff;
    color: white;
  
  padding: 1em;
  
  margin-bottom: .5em;
}
section {
    padding: 1em;
    border: 1px solid #ddd;
    background-color: white;
    margin-bottom: 1em;
}
section:target {
    -webkit-animation: highlight .8s ease-out;
            animation: highlight .8s ease-out;
}
@-webkit-keyframes highlight {
    0% { background-color: #FFFF66; }
    100% { background-color: #FFFFFF; }
}
@keyframes highlight {
    0% { background-color: #FFFF66; }
    100% { background-color: #FFFFFF; }
}

Это пример подсвечивания "якоря" после перехода к нему.

@boilzzz · 30.05.2016, 20:48

Наведение jquery https://jsfiddle.net/8y7a0u7p/3/

@Даниил Тёмин · 30.05.2016, 21:11 **[ТС]**

boilzzz, Да, именно. Спасибо большое, сейчас буду пробовать.

Добавлено через 7 минут

Сообщение от boilzzz

Нажатием https://jsfiddle.net/8y7a0u7p/2/

Меня беспокоит код Javascript

JavaScript
1
2
3
$('.link').click(function(){
       $('.yakor').toggleClass('yakorr');
})

Значит ли это, что он будет применяться к любой ссылке на странице?

Всё, сообразил. Там же стоит указание, для какого класса. Прошу простить, ночь, вот голова и не варит.

Добавлено через 13 минут

Сообщение от boilzzz

Нажатием https://jsfiddle.net/8y7a0u7p/2/

Увы, на странице это не работает. Вот код страницы:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Даниленко Артём | Мои друзья</title> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta name="generator" content="Danilenko Artem Company - D.A.C. International">
 
 <style type="text/css">
  .link, .yakor {
  color:black;
  text-decoration:none;
}
 
.yakorr {
  color:red;
  background:black;
}
  </style>
 
<script type="text/javascript">
$('.link').click(function(){
       $('.yakor').toggleClass('yakorr');
})
</script>
 
</head>
<body background="background.png">
<br> 
<h1 align="center">Мои друзья</h1>
<br><br><br>
<div align="left" style="margin: 0 50px 0 50px; float: left;"><img src="friends.jpg" width="278" height="400" usemap="#map"></div>
<p><map name="map">
<area shape="rect" alt="Алексей" coords="9,214, 175,380" href="#fr1" class="link">
<area shape="rect" alt="Катя" coords="120,126, 209,204" href="#fr2" class="link">
<area shape="rect" alt="Вадим" coords="157,55, 230,123" href="#fr3" class="link">
</map></p>
<div>
<a href="#fr1" class="link">1</a>
<table width="65%">
<tr>
<td align="center" width="33%"><h2 style="padding-top: 10px;"><a name="fr1" class="yakor">Алексей</a></h2><br>
<ol type="a" style="font-size: 14pt; list-style-position: inside;">
<li>весёлый</li>
<li>умный</li>
<li>жизнерадостный</li>
<li>спортивный</li>
</ol>
</td>
<td width="34%"> </td>
<td align="center" width="33%"><h2 style="padding-top: 10px;"><a name="fr2" class="yakor">Катя</a></h2><br>
<ol type="I" style="font-size: 14pt; list-style-position: inside;">
<li>красивая</li>
<li>умная</li>
<li>творческая</li>
<li>отзывчивая</li>
</ol></td>
</tr>
<tr>
<td align="center" width="100%" colspan="3"><br><h2 style="padding-top: 10px;"><a name="fr3" class="yakor">Вадим</a></h2><br>
<ol type="1" style="font-size: 14pt; list-style-position: inside;">
<li>умный</li>
<li>креативный</li>
<li>респектабельный</li>
<li>порядочный</li>
</ol></td>
</tr>
</table>
</div>
<br><br><br>
<h1 align="center">Навигация</h1><br>
<div align="center">
<table width="65%">
<tr>
<td width="12,5%" align="center" style="padding: 10px;"><a href="index.html" title="Главная"><img src="0.png" width="70" height="70"></a></td>
<td width="12,5%" align="center" style="padding: 10px;"><a href="1.html" title="Мой дом"><img src="1.png" width="70" height="70"></a></td>
<td width="12,5%" align="center" style="padding: 10px;"><a href="2.html" title="Моя школа"><img src="2.png" width="70" height="70"></a></td>
<td width="12,5%" align="center" style="padding: 10px;"><a href="3.html" title="Мой университет"><img src="3.png" width="70" height="70"></a></td>
<td width="12,5%" align="center" style="padding: 10px;" bgcolor="#99FF66"><a href="4.html" title="Мои друзья"><img src="4.png" width="70" height="70"></a></td>
<td width="12,5%" align="center" style="padding: 10px;"><a href="5.html" title="Мои положительные качества"><img src="5.png" width="70" height="70"></a></td>
<td width="12,5%" align="center" style="padding: 10px;"><a href="6.html" title="Мои интересы"><img src="6.png" width="70" height="70"></a></td>
<td width="12,5%" align="center" style="padding: 10px;"><a href="7.html" title="Мои успехи"><img src="7.png" width="70" height="70"></a></td>
</tr>
<table>
</div>
<div style="margin-bottom: 50px;"> </div>
</body>
</html>

@Fedor92 · 30.05.2016, 21:13

Даниил Тёмин, а кто jquery подключать будет?

HTML5
1
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

к примеру...

@Даниил Тёмин · 30.05.2016, 21:38 **[ТС]**

Сообщение от Fedor92

а кто jquery подключать будет?

HTML5
1
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

Не помогло.

Добавлено через 17 минут
Большое спасибо mrtoxas за наиболее понятное мне решение данной задачи. Всё работает, как нужно.

Всем спасибо, вопрос закрыт

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Даниил Тёмин 0 / 0 / 0 Регистрация: 04.08.2011 Сообщений: 31

	Изменение стилей заголовка при клике по ссылке 30.05.2016, 20:13. Показов 2204. Ответов 6 Метки нет (Все метки) Есть ссылка <a href...> на якорь <a name...> на странице html, размещённая на изображении посредством тега map. Якорь <a name...> закреплён на неком заголовке в таблице. Вопрос: можно ли сделать так, чтоб при нажатии/наведении на ссылку <a href...>, ведущую на якорь (a name...), данный заголовок (сам якорь <a name...>) менял цвет/выделялся/мигал и.т.п.? Уточнение: я знаю, как сделать что-то подобное с ссылкой (<a href...>), это делается через атрибуты css, задаваемые для тега а. Но мне нужно изменение самого якоря <a name...> при наведении/нажатии на ссылку <a href...> Итак, возможно ли это, и если да, то как это реализовать? 0

@boilzzz Богатый духовно 455 / 262 / 145 Регистрация: 10.03.2015 Сообщений: 1,057
	30.05.2016, 20:41
	Даниил Тёмин, как то так? https://jsfiddle.net/8y7a0u7p/1/ Нажатием https://jsfiddle.net/8y7a0u7p/2/ 1

@boilzzz Богатый духовно 455 / 262 / 145 Регистрация: 10.03.2015 Сообщений: 1,057
	30.05.2016, 20:48
	Наведение jquery https://jsfiddle.net/8y7a0u7p/3/ 0

Изменение стилей заголовка при клике по ссылке

Решение