Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #51 (permalink)  
Старый 15.11.2020, 13:45
Аватар для Александр83
Аспирант
Отправить личное сообщение для Александр83 Посмотреть профиль Найти все сообщения от Александр83
 
Регистрация: 06.03.2017
Сообщений: 91

У меня существует два блока со ссылками в левом блоке и якорями на правый блок, нужно чтоб в левом блоке при наведении на ссылку Z1, подсвечивался текст в правом блоке с id="Z1", но суть такая что ссылок много и все они имеют href="Z1", href="Z11", href="Z111" и так далее.
в коде js нужно сделать так чтоб при наведении на ссылку к примеру Z1 он подсвечивал только текст с id=Z1 а не все похожие id.
Ответить с цитированием
  #52 (permalink)  
Старый 15.11.2020, 14:16
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,569

Александр83,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  #Z1:hover, #Z11:hover, #Z111:hover{
    color: #fff;
    background: #0033FF;
}
a.Z1:hover, a.Z11:hover, a.Z111:hover{
    color: #fff;
    background: #0033FF;
}
.script_css{
    color: #fff;
    background: #0033FF;
}

  </style>
<style type="text/css">
div.right_scrol{
    height: 200px;
    border: 4px solid red;
    overflow-y: scroll;
    position: relative;
}

div.right_scrol a{
    display: block;
    height: 150px;
}

</style>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
jQuery(function() {
    jQuery('a[href^="#Z"]').on('click mouseenter mouseleave', function(event) {
        event.preventDefault();
        var hash = this.hash;
        var scrollTop = jQuery(hash)[0].offsetTop ;// - 500;
        if(event.type == 'click')jQuery('div.right_scrol').stop().animate({scrollTop}, 1000, () => location.hash = hash);
        jQuery(this).addClass("script_css").siblings().removeClass("script_css");
        jQuery(this.hash).addClass("script_css").siblings().removeClass("script_css");
    })
    jQuery(`a[href^="${location.hash}"]`).click();
});

  </script>
</head>

<body>
<div class="left_img">
<a href="#Z1">Z1</a>
<a href="#Z11">Z11</a>
<a href="#Z111">Z111</a>
</div>

<div class="right_scrol">
<a id="Z1">Z1</a>
<a id="Z11">Z11</a>
<a id="Z111">Z111</a>
</div>

</body>
</html>
Ответить с цитированием
  #53 (permalink)  
Старый 15.11.2020, 14:55
Аватар для Александр83
Аспирант
Отправить личное сообщение для Александр83 Посмотреть профиль Найти все сообщения от Александр83
 
Регистрация: 06.03.2017
Сообщений: 91

Все работает, огромное вам спасибо!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Поставить галочку в нужном чекбоксе, при переходе с другой страницы mazalmaz Общие вопросы Javascript 8 11.11.2015 10:46
Выделение строки <select> при выборе checkbox DarkMaster13 Общие вопросы Javascript 4 14.04.2014 03:30
Включение <input type="radio"> при клике на а люьую область строки. Vel Общие вопросы Javascript 2 24.06.2009 21:39
Выделение строки <select> при выборе другого <select> simbion Элементы интерфейса 12 05.05.2009 03:43
Подсветка выделенной строки в таблице (row table highlight) artsage Элементы интерфейса 4 03.04.2009 06:40