Сделать так, что бы сделать нажатую ссылку активной а другие нет

@Yarik132132 · Регистрация: 04.02.2017

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

В общем есть 4 ссылки, нужно что бы когда пользователь нажимал на одну из них, она изменяла свой класс, а ту ссылку которая раньше была нажата вернуть в класс неактивных ссылок. Вот код

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="ru">
    <head>
        <title>footballUkRaIne</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="CSS/main.css" type="text/css">
    </head>
    <body>
        <div class="container_left">
            <div class="rezult">
                <div class="test"><a class="active" href="#premier_liga" title="Премьер лига Украины">Премьер лига</a></div>
                <div class="test"><a class="none" href="#first_liga" title="Первая лига Украины">Первая лига</a></div>
                <div class="test"><a class="none" href="#kybok" title="Кубок Украины">Кубок</a></div>
                <div class="test"><a class="none" href="#two_liga" title="Вторая лига Украины">Вторая лига</a></div>
            </div>
        </div>
    </body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.test {display: inline-block;}
.container_left{
    height: 1000px;
    border: 1px solid black;
    margin: -6px -8px 0 -8px;
    padding: 0;
    background-color: #111111;
}
.rezult {
    position: relative;
    text-align: center;
    margin: 30px;
    width: 25%;
    color:white;
    height: 400px;
}
.active:visited, .active:link{
    cursor: pointer;
    color: #ffb100;
    padding-bottom: 2px;
    border-bottom: 2px dashed gray;
}

И да ребят, я пробовал делать, вообще ничего не выходит

@TinSemenova · 01.11.2017, 15:55

Здравствуйте!

Вы не приложили скрипт, который используете.

Например (script.js):

JavaScript
1
2
3
4
5
6
7
8
function changeActive(k){
    for(i=0;i<4;i++){
        if (k==i)
            document.getElementsByTagName('a')[i].className = 'active';
        else
            document.getElementsByTagName('a')[i].className = 'none';
    }
}

Добавить в html в раздел <head> строчку с указанием используемого скрипта.

Например, если скрипт лежит в папке JS (JS/script.js):

HTML5
1
<script type="text/javascript" src="JS/script.js"></script>

Указать клик по ссылкам:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="ru">
    <head>
        <title>footballUkRaIne</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="CSS/main.css" type="text/css">
        <script type="text/javascript" src="JS/script.js"></script>
    </head>
    <body>
        <div class="container_left">
            <div class="rezult">
                <div class="test"><a class="active" href="#premier_liga" title="Премьер лига Украины" onClick="changeActive(0);">Премьер лига</a></div>
                <div class="test"><a class="none" href="#first_liga" title="Первая лига Украины" onClick="changeActive(1);">Первая лига</a></div>
                <div class="test"><a class="none" href="#kybok" title="Кубок Украины" onClick="changeActive(2);">Кубок</a></div>
                <div class="test"><a class="none" href="#two_liga" title="Вторая лига Украины" onClick="changeActive(3);">Вторая лига</a></div>
            </div>
        </div>
    </body>
</html>

@Yarik132132 · 01.11.2017, 20:40 **[ТС]**

А если тэг "a" находится где то далеко в коде, как тогда выделить в js его?

@TinSemenova · 01.11.2017, 21:16

Какой у Вас код на javascript?

Поведение ссылок не должно зависеть от того, как далеко они находятся в коде.
Скрипт срабатывает по клику на ссылке и задаёт кликнутой ссылке класс 'active'.

@Yarik132132 · 01.11.2017, 21:30 **[ТС]**

Суть то в том что код тот который прислали вы.
Вот то что происходит

@TinSemenova · 01.11.2017, 21:55

Я написала как решить задачу для той части кода которая была представлена.

Надо переписать, учитывая связывание этих ссылок с другими.

Я попробую написать независимый код. Но лучше конечно знать какие классы Вы уже используете в коде.

@Опан · 01.11.2017, 22:50

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

А если тэг "a" находится где то далеко в коде, как тогда выделить в js его?

Если ссылки "далеко" и прописать клик непосредственно в них "невозможно", то вместо этого можно добавить такой JS-код:

JavaScript
1
2
3
4
5
var alles_a=document.getElementsByTagName("a");
for(j=0;j<alles_a.length;j++){
    alles_a[j].id=j;
    alles_a[j].onclick=function(){changeActive(this.id);};
};

@Yarik132132 · 02.11.2017, 14:48 **[ТС]**

Клик происходит и на пустой странице где только эти ссылки, это работает. Но если сделать так:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="ru">
    <head>
        <title>footballUkRaIne</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="CSS/main.css" type="text/css">
    </head>
    <body>
        <div class="container_left">
            <a href="#">Проверка1</a><br>
            <a href="#">Проверка2</a><br> 
            <a href="#">Проверка3</a><br> 
            <a href="#">Проверка4</a><br>
            <div class="rezult">
                <div class="test"><a class="active" href="#premier_liga" title="Премьер лига Украины" onClick="changeActive(0);">Премьер лига</a></div>
                <div class="test"><a class="none" href="#first_liga" title="Первая лига Украины" onClick="changeActive(1);">Первая лига</a></div>
                <div class="test"><a class="none" href="#kybok" title="Кубок Украины" onClick="changeActive(2);">Кубок</a></div>
                <div class="test"><a class="none" href="#two_liga" title="Вторая лига Украины" onClick="changeActive(3);">Вторая лига</a></div>
            </div>
        </div>
        <script src="tablica.js"></script>
    </body>
</html>

То сами можете видеть результат

Добавлено через 3 минуты
Тема закрыта, проблему решил.

Java
1
2
3
4
5
6
7
8
function changeActive(k){
    for(i=0;i<4;i++){
        if (k==i)
            document.getElementsByClassName('rezult')[0].getElementsByTagName('a')[i].className = 'active';
        else
            document.getElementsByClassName('rezult')[0].getElementsByTagName('a')[i].className = 'none';
    }
}

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@Yarik132132 0 / 0 / 0 Регистрация: 04.02.2017 Сообщений: 16
	01.11.2017, 20:40 [ТС]
	А если тэг "a" находится где то далеко в коде, как тогда выделить в js его? 0

@TinSemenova 85 / 67 / 25 Регистрация: 09.10.2017 Сообщений: 208
	01.11.2017, 21:16
	Какой у Вас код на javascript? Поведение ссылок не должно зависеть от того, как далеко они находятся в коде. Скрипт срабатывает по клику на ссылке и задаёт кликнутой ссылке класс 'active'. 0

@Yarik132132 0 / 0 / 0 Регистрация: 04.02.2017 Сообщений: 16
	01.11.2017, 21:30 [ТС]
	Суть то в том что код тот который прислали вы. Вот то что происходит 0

@TinSemenova 85 / 67 / 25 Регистрация: 09.10.2017 Сообщений: 208
	01.11.2017, 21:55
	Я написала как решить задачу для той части кода которая была представлена. Надо переписать, учитывая связывание этих ссылок с другими. Я попробую написать независимый код. Но лучше конечно знать какие классы Вы уже используете в коде. 0

Сделать так, что бы сделать нажатую ссылку активной а другие нет

Решение