Javascript-форум - Подсветка строки при переходе по якорю

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Подсветка строки при переходе по якорю (https://javascript.ru/forum/jquery/60840-podsvetka-stroki-pri-perekhode-po-yakoryu.html)

Александр83,
а можно без php?

<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>

#Z1:hover, #Z11:hover, #Z111:hover{
    color: #fff;
    background: #0033FF;
}
a.Z1:hover, a.Z11:hover, a.Z111:hover{
    color: #fff;
    background: #0033FF;
}
#Z1 .script_css, #Z11 .script_css, #Z111 .script_css{
    color: #fff;
    background: #0033FF;
} 
a.Z1 .script_css, a.Z11 .script_css, a.Z111 .script_css{
    color: #fff;
    background: #0033FF;
}

jQuery(document).ready(function() {
    jQuery('a[href^="#Z1,#Z11,#Z111"]').click(function() {
        var target = jQuery(this).attr("href");
        jQuery('div.right_scrol').animate({
            scrollTop: jQuery(target).position().top - 500}, 1000);
        return false
    }).mouseenter(function() {
        var target = jQuery(this).attr("href");
        jQuery('#Z1,#Z11,#Z111').addClass("script_css")
    }).mouseleave(function() {
        var target = jQuery(this).attr("href");
        jQuery('#Z1,#Z11,#Z111').removeClass("script_css")
    })
});

jQuery(document).ready(function() {
    jQuery('a[id^="Z1, Z11, Z111"]').click(function() {
        var target = jQuery(this).attr("id");
        return false
    }).mouseenter(function() {
        var target = jQuery(this).attr("href");
        jQuery('a.Z1, a.Z11, a.Z111').addClass("script_css")
    }).mouseleave(function() {
        var target = jQuery(this).attr("href");
        jQuery('a.Z1, a.Z11, a.Z111').removeClass("script_css")
    })
});

вот!, не знаю как в JS объединить значения Z1,Z11,Z111 "jQuery('a[href^="#Z1,#Z11,#Z111"]')" возможно сделал ошибки, но мне в принципе это не нужно так как у меня там php.

Александр83,

#Z1.script_css, #Z11.script_css, #Z111.script_css{
    color: #fff;
    background: #0033FF;
}

jQuery('a[href^="#Z"]').click

Здравстуйте, скажите пожалуйста как сделать в данном коде так чтобы значениям Z1, Z11, Z111 присваивался script_css по отдельности, сейчас при переходе по якорю подсвечиваются все три так как видит начало Z1, код прежний ниже:

jQuery(document).ready(function() {
    jQuery('a[id^="Z1, Z11, Z111"]').click(function() {
        var target = jQuery(this).attr("id");
        return false
    }).mouseenter(function() {
        var target = jQuery(this).attr("href");
        jQuery('a.Z1, a.Z11, a.Z111').addClass("script_css")
    }).mouseleave(function() {
        var target = jQuery(this).attr("href");
        jQuery('a.Z1, a.Z11, a.Z111').removeClass("script_css")
    })
});

немного исправил:

jQuery(document).ready(function() {
    jQuery('a[href^="#Z"]').click(function() {
        var target = jQuery(this).attr("href");
        jQuery('div.right_scrol').animate({
            scrollTop: jQuery(target).position().top - 500}, 1000);
        return false
    }).mouseenter(function() {
        var target = jQuery(this).attr("href");
        jQuery('#Z1,#Z11,#Z111').addClass("script_css")
    }).mouseleave(function() {
        var target = jQuery(this).attr("href");
        jQuery('#Z1,#Z11,#Z111').removeClass("script_css")
    })
});

Александр83,
target зачем?

Я не силен в JS, что же в замен target можно использовать...

Цитата:

Сообщение от Александр83

что же в замен target можно использовать...

убрать строки 8 и 11, сообщение #45

Убрал, но все равно подсвечивает все что начинается на Z1

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

У меня существует два блока со ссылками в левом блоке и якорями на правый блок, нужно чтоб в левом блоке при наведении на ссылку Z1, подсвечивался текст в правом блоке с id="Z1", но суть такая что ссылок много и все они имеют href="Z1", href="Z11", href="Z111" и так далее.
в коде js нужно сделать так чтоб при наведении на ссылку к примеру Z1 он подсвечивал только текст с id=Z1 а не все похожие id.

Александр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>

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