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

@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';
    }
}

Новые блоги и статьи Все статьи Все блоги /
Отчёт о затраченных материалах за определенный период с макетом печатной формы Maks 21.04.2026 Отчёт из решения ниже размещён в конфигурации КА2. Задача: разработка отчёта по затраченным материалам за определённый период, с возможностью вывода печатной формы отчёта с шапкой и подвалом. В. . .	Отчёт о спецтехнике находящейся в ремонте Maks 20.04.2026 Отчёт из решения ниже размещен в конфигурации КА2. Задача: отобразить спецтехнику, которая на данный момент находится в ремонте. Есть нетиповой документ "Заявка на ремонт спецтехники" который. . .	Памятка для бота и "визитка" для читателей "Semantic Universe Layer (Слой семантической вселенной)" Hrethgir 19.04.2026 Сгенерировано для краткого описания по случаю сборки и компиляции скелета серверного приложения. И пусть после этого скажут, что статьи сгенерированные AI - туфта и не интересно. И это не реклама -. . .	Запрет удаления строк ТЧ документа при определённом условии Maks 19.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "Аккумуляторы", разработанного в конфигурации КА2. У данного документа есть ТЧ, в которой в зависимости от прав доступа. . .
Модель заражения группы наркоманов alhaos 17.04.2026 Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .	Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .	Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.

@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

Опции темы

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

Решение