Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице

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

Alexbelkevich 22.01.2016 16:48
Подсветка строки при переходе по якорю
 
Доброго времени суток.
http://www.megavend.ru/catalog/catal...atelei/#0V3710

вот есть страница. На ней нажимаешь по цифре - с помощью якоря показывается нужный товар.
Но не могу понять, с какой стороны подойти, чтобы нужная строка подсвечивалась при клике на якорь. Прошу помощи!

рони 22.01.2016 18:14
Alexbelkevich,
$(function(){
 var hash = window.location.hash; 
 hash &&  $(hash).find('td').css({'background-color':  '#FF00FF'})
   })

Alexbelkevich 22.01.2016 19:03
Не работает :(

рони 22.01.2016 19:16
Alexbelkevich,
и в какое место вы поставили код?

Alexbelkevich 23.01.2016 09:41
В хеде подключил.
Я JS только начинаю учить, базовые элементы прохожу. С DOM еще не работал, поэтому для меня пока это все дело темный лес

рони 23.01.2016 11:09
Alexbelkevich,
не смог обнаружить ... может строку подскажите?

Alexbelkevich 23.01.2016 16:08
Точнее работает, но не так.. Автоматически первую строку подсвечивает.
вот тут для теста сделал http://hellofrontend.ru/test2

рони 23.01.2016 16:41
Alexbelkevich,
скрипт посвечивает ту строку с которой совпадает hash при загрузке страницы. более ничем помочь не могу.

Alexbelkevich 23.01.2016 17:39
Так мне надо при клике на якорь подсвечивать нужную строку. Задачи совершенно другая нужна.. Зачем мне хэш то...

рони 23.01.2016 17:57
Alexbelkevich,
не грусти ... попробуй так :write: 
$(function() {
    function b(a) {
        $(".all-table td").css({
            "background-color": ""
        });
        $(a).find("td").css({
            "background-color": "#FF00FF"
        })
    }
    $(".hs-wrap a").click(function() {
        var a = $(this).attr("href");
        a && b(a)
    });
    var c = window.location.hash;
    c && b(c)
});

Alexbelkevich 23.01.2016 18:05
Спасибо большое! Теперь все получилось!)))
Не грущу, мне никто ничем не обязан))
:victory:

Александр83 06.03.2017 06:35
Проблема с подсветкой якоря ссылки
 
Доброго времени суток! Подскажите пожалуйста как установить подсветку якоря в данном коде?

jQuery(document).ready(function() {
jQuery('a[href^="#<?php echo $block_hover; ?>"]').click(function(){
var target = jQuery(this).attr('href');
jQuery('html, body').animate({scrollTop: jQuery(target).offset().top - 120}, 1000);
return false;
});
});

CSS:
.active_hover{
background: #0033FF;
}

рони 06.03.2017 07:39
Александр83,
$(function(){
 var hash = window.location.hash;
 hash &&  $(hash).addClass("active_hover")
   })

Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Александр83 06.03.2017 08:26
<style>
.glav{
display: block;
}
#<?php echo $block_hover; ?>:hover{
color: #fff;
text-decoration: none;
background: #0033FF;
display: block;
font-size: 13px;
cursor: pointer;
position: relative;
border: 1px solid #0033FF;
}
a.<?php echo $block_hover; ?>:hover{
color: #fff;
text-decoration: none;
background: #0033FF;
display: block;
font-size: 13px;
cursor: pointer;
position: relative;
border: 1px solid #0033FF;
}
a.<?php echo $block_hover; ?> {
font-size: 13px;
background: #666;
text-align: center;
color: #fff;
text-decoration: none;
border-color: #000;
border-radius: 2px;
position: relative;
display: block;
}
.active_hover{
background: #0033FF;
}
</style>

<script>
jQuery(document).ready(function() {
jQuery('a[href^="#<?php echo $block_hover; ?>"]').click(function(){
var target = jQuery(this).attr('href');
jQuery('html, body').animate({scrollTop: jQuery(target).offset().top - 120}, 1000);
return false;
});
});
</script>

Извиняюсь за несообразительность! я только изучаю, вот полный код который прописан в VM на php, куда именно необходимо прописать ваше дополнение? заранее благодарен.

Александр83 06.03.2017 08:26
<style>
.active_hover{
background: #0033FF;
}
</style>

<script>
jQuery(document).ready(function() {
jQuery('a[href^="#<?php echo $block_hover; ?>"]').click(function(){
var target = jQuery(this).attr('href');
jQuery('html, body').animate({scrollTop: jQuery(target).offset().top - 120}, 1000);
return false;
});
});
</script>

Извиняюсь за несообразительность! я только изучаю, вот полный код который прописан в VM на php, куда именно необходимо прописать ваше дополнение? заранее благодарен.

рони 06.03.2017 08:57
Александр83,
http://javascript.ru/formatting

Александр83 06.03.2017 12:04
Цитата:
Сообщение от рони (Сообщение 446488)
Александр83,
http://javascript.ru/formatting
здесь нет необходимой информации по моему вопросу:-? !

рони 06.03.2017 15:00
Цитата:
Сообщение от Александр83
здесь нет необходимой информации по моему вопросу
вас просят, правильно оформить свой вопрос, используя теги форматирования.

Александр83 07.03.2017 05:10 
.active_hover{
background: #0033FF;
}



jQuery(document).ready(function() {
jQuery('a[href^="#<?php echo $block_hover; ?>"]').click(function(){
var target = jQuery(this).attr('href');
jQuery('html, body').animate({scrollTop: jQuery(target).offset().top - 120}, 1000);
return false;
});
});

Александр83 07.03.2017 05:11
ну как то так!

Александр83 07.03.2017 05:24
давайте с самого начало!

Александр83 07.03.2017 05:51 
// Блок № 1 наведение на ссылку перехода по якорю

<table class="tab_01" width="100%" height="100%">
  <tr>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_001.'" class="'.$dataItem->tab_001.'">' .$dataItem->tab_001. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_002.'" class="'.$dataItem->tab_002.'">' .$dataItem->tab_002. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_003.'" class="'.$dataItem->tab_003.'">' .$dataItem->tab_003. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_004.'" class="'.$dataItem->tab_004.'">' .$dataItem->tab_004. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_005.'" class="'.$dataItem->tab_005.'">' .$dataItem->tab_005. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_006.'" class="'.$dataItem->tab_006.'">' .$dataItem->tab_006. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_007.'" class="'.$dataItem->tab_007.'">' .$dataItem->tab_007. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_008.'" class="'.$dataItem->tab_008.'">' .$dataItem->tab_008. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_009.'" class="'.$dataItem->tab_009.'">' .$dataItem->tab_009. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_010.'" class="'.$dataItem->tab_010.'">' .$dataItem->tab_010. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_011.'" class="'.$dataItem->tab_011.'">' .$dataItem->tab_011. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_012.'" class="'.$dataItem->tab_012.'">' .$dataItem->tab_012. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_013.'" class="'.$dataItem->tab_013.'">' .$dataItem->tab_013. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_014.'" class="'.$dataItem->tab_014.'">' .$dataItem->tab_014. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_015.'" class="'.$dataItem->tab_015.'">' .$dataItem->tab_015. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_016.'" class="'.$dataItem->tab_016.'">' .$dataItem->tab_016. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_017.'" class="'.$dataItem->tab_017.'">' .$dataItem->tab_017. '</a>'; ?></td>
  </tr>
</table>

// Блок № 2 подсвечивание ссылки

<div class="op_01">
<a id="<?php echo $product->product_sku; ?>" class="op_02"
title="<?php echo $product->product_name; ?>">
&nbsp;<?php echo $product->product_sku; ?>&nbsp;
<?php echo shopFunctionsF::
limitStringByWord($product->product_name,'17','...'); ?></a>
</div>
<?php 
$block_hover = $product->product_sku;
?>



#<?php echo $block_hover; ?>:hover{
    color: #fff;
    text-decoration: none;
    background: #0033FF;
    display: block;
    font-size: 13px;
    cursor: pointer;
    position: relative;
    border: 1px solid #0033FF;
}
a.<?php echo $block_hover; ?>:hover{
    color: #fff;
    text-decoration: none;
    background: #0033FF;
    display: block;
    font-size: 13px;
    cursor: pointer;
    position: relative;
    border: 1px solid #0033FF;
}
a.<?php echo $block_hover; ?> {
    font-size: 13px;
    background: #666;
    text-align: center;
    color: #fff;
    text-decoration: none;
    border-color: #000;
    border-radius: 2px;
    position: relative;
    display: block;
}
.active_hover{
    background: #0033FF;
}


// Плавная прокрутка до якоря

jQuery(document).ready(function() {
   jQuery('a[href^="#<?php echo $block_hover; ?>"]').click(function(){
      var target = jQuery(this).attr('href');
      jQuery('html, body').animate({scrollTop: jQuery(target).offset().top - 120}, 800);
      return false;
   });
});

Александр83 07.03.2017 05:51 
// Блок № 1 наведение на ссылку перехода по якорю

<table class="tab_01" width="100%" height="100%">
  <tr>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_001.'" class="'.$dataItem->tab_001.'">' .$dataItem->tab_001. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_002.'" class="'.$dataItem->tab_002.'">' .$dataItem->tab_002. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_003.'" class="'.$dataItem->tab_003.'">' .$dataItem->tab_003. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_004.'" class="'.$dataItem->tab_004.'">' .$dataItem->tab_004. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_005.'" class="'.$dataItem->tab_005.'">' .$dataItem->tab_005. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_006.'" class="'.$dataItem->tab_006.'">' .$dataItem->tab_006. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_007.'" class="'.$dataItem->tab_007.'">' .$dataItem->tab_007. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_008.'" class="'.$dataItem->tab_008.'">' .$dataItem->tab_008. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_009.'" class="'.$dataItem->tab_009.'">' .$dataItem->tab_009. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_010.'" class="'.$dataItem->tab_010.'">' .$dataItem->tab_010. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_011.'" class="'.$dataItem->tab_011.'">' .$dataItem->tab_011. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_012.'" class="'.$dataItem->tab_012.'">' .$dataItem->tab_012. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_013.'" class="'.$dataItem->tab_013.'">' .$dataItem->tab_013. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_014.'" class="'.$dataItem->tab_014.'">' .$dataItem->tab_014. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_015.'" class="'.$dataItem->tab_015.'">' .$dataItem->tab_015. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_016.'" class="'.$dataItem->tab_016.'">' .$dataItem->tab_016. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_017.'" class="'.$dataItem->tab_017.'">' .$dataItem->tab_017. '</a>'; ?></td>
  </tr>
</table>

// Блок № 2 подсвечивание ссылки

<div class="op_01">
<a id="<?php echo $product->product_sku; ?>" class="op_02"
title="<?php echo $product->product_name; ?>">
&nbsp;<?php echo $product->product_sku; ?>&nbsp;
<?php echo shopFunctionsF::
limitStringByWord($product->product_name,'17','...'); ?></a>
</div>
<?php 
$block_hover = $product->product_sku;
?>



#<?php echo $block_hover; ?>:hover{
    color: #fff;
    text-decoration: none;
    background: #0033FF;
    display: block;
    font-size: 13px;
    cursor: pointer;
    position: relative;
    border: 1px solid #0033FF;
}
a.<?php echo $block_hover; ?>:hover{
    color: #fff;
    text-decoration: none;
    background: #0033FF;
    display: block;
    font-size: 13px;
    cursor: pointer;
    position: relative;
    border: 1px solid #0033FF;
}
a.<?php echo $block_hover; ?> {
    font-size: 13px;
    background: #666;
    text-align: center;
    color: #fff;
    text-decoration: none;
    border-color: #000;
    border-radius: 2px;
    position: relative;
    display: block;
}
.active_hover{
    background: #0033FF;
}


// Плавная прокрутка до якоря

jQuery(document).ready(function() {
   jQuery('a[href^="#<?php echo $block_hover; ?>"]').click(function(){
      var target = jQuery(this).attr('href');
      jQuery('html, body').animate({scrollTop: jQuery(target).offset().top - 120}, 800);
      return false;
   });
});

Александр83 07.03.2017 05:52
Простите что по два раза / у меня выходит)

Александр83 07.03.2017 05:54
Ну вот, мой вопрос, при наведении на первый блок ссылку, подсвечивание якоря ID во втором блоке

Александр83 07.03.2017 05:57
Подмогните пожалуйста)), уже месяц как не могу найти решение!:(

рони 07.03.2017 08:09
Александр83,
<script>
jQuery(document).ready(function() {
  jQuery('a[href^="#<?php echo $block_hover; ?>"]').click(function(){
    var target = jQuery(this).attr('href');
    jQuery('html, body').animate({scrollTop: jQuery(target).offset().top - 120}, 800);
    return false;
  });
*!*
var hash = window.location.hash;
 hash &&  jQuery(hash).addClass("active_hover")
*/!*

});

  </script>

Александр83 07.03.2017 08:19
не работает:(

рони 07.03.2017 09:04
Александр83,
при переходе с другой страницы должно подсветить. возможно вы хотите что-то иное

Александр83 07.03.2017 09:37
Вложений: 1
нет, все находится на одной странице, без переходов, существует два блока левый и правый при наведении мышки левого блока - необходима подсветка правого элемента как на скриншоте (во вложении).

Александр83 07.03.2017 09:39

Александр83 07.03.2017 09:40
https://disk.yandex.ru/client/disk?d...сунок.bmp

Александр83 07.03.2017 09:41
не получается загрузить качественное изображение, отправил на яндексе.

рони 07.03.2017 09:57
Цитата:
Сообщение от Александр83
отправил на яндексе
не могу посмотреть

Александр83 07.03.2017 10:30
не получается загрузить образец изображения, ну вообщем суть в том чтоб без перехода и только при наведении мышки на ссылку с классом hover, данный класс передавался на другой блок (вроде дублирования HOVER).
средствами CSS - это невыполнимо, в вот JS можно, только вот не знаю как!

рони 07.03.2017 10:52
Цитата:
Сообщение от Александр83
только при наведении мышки на ссылку с классом hover
заменить полностью на это
jQuery(document).ready(function() {
    jQuery('a[href^="#<?php echo $block_hover; ?>"]').click(function() {
        var target = jQuery(this).attr("href");
        jQuery("html, body").animate({
            scrollTop: jQuery(target).offset().top - 120
        }, 800);
        return false
    }).mouseenter(function() {
        var target = jQuery(this).attr("href");
        jQuery(target).addClass("active_hover")
    }).mouseleave(function() {
        var target = jQuery(this).attr("href");
        jQuery(target).removeClass("active_hover")
    })
});

Александр83 07.03.2017 11:31
к сожалению ни чего не изменилось, а в самой ссылки на якорь нужно какой либо путь до JS прописывать?

<?php echo '<a href="#'.$dataItem->tab_001.'" class="'.$dataItem->tab_001.'">' .$dataItem->tab_001. '</a>'; ?>

рони 07.03.2017 11:35
Александр83,
не могу вам помочь, не знаю php

Александр83 07.03.2017 12:39
по PHP нашел сам решение, спасибо, очень помогли, безмерно благодарен вам:)

Александр83 10.03.2017 06:27
Здравствуйте! возникла очередная проблема в подсветке определенной ссылки, проблема состоит в том что,
при наведении курсора мышки на ссылку "Z111" с div классом left_img - подсветка происходит в div классом right_scrol
на все три ссылки (Z1, Z11, Z111), скажите пожалуйста как установить точность чтоб при наведении подсвечивалась Z1 к Z1 итд.
Заранее благодарен за ответ!

<div class="left_img">
<a href="#<?php echo $block_hover; ?>">Z1</a>
<a href="#<?php echo $block_hover; ?>">Z11</a>
<a href="#<?php echo $block_hover; ?>">Z111</a>
</div>

<div class="right_scrol">
<a id="<?php echo $block_hover; ?>">Z1</a>
<a id="<?php echo $block_hover; ?>">Z11</a>
<a id="<?php echo $block_hover; ?>">Z111</a>
</div>



#<?php echo $block_hover; ?>:hover{
    color: #fff;
    background: #0033FF;
}
a.<?php echo $block_hover; ?>:hover{
    color: #fff;
    background: #0033FF;
}
#<?php echo $block_hover; ?>.script_css{
    color: #fff;
    background: #0033FF;
} 
a.<?php echo $block_hover; ?>.script_css{
    color: #fff;
    background: #0033FF;
}



jQuery(document).ready(function() {
    jQuery('a[href^="#<?php echo $block_hover; ?>"]').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('#<?php echo $block_hover; ?>').addClass("script_css")
    }).mouseleave(function() {
        var target = jQuery(this).attr("href");
        jQuery('#<?php echo $block_hover; ?>').removeClass("script_css")
    })
});



jQuery(document).ready(function() {
    jQuery('a[id^="<?php echo $block_hover; ?>"]').click(function() {
        var target = jQuery(this).attr("id");
        return false
    }).mouseenter(function() {
        var target = jQuery(this).attr("href");
        jQuery('a.<?php echo $block_hover; ?>').addClass("script_css")
    }).mouseleave(function() {
        var target = jQuery(this).attr("href");
        jQuery('a.<?php echo $block_hover; ?>').removeClass("script_css")
    })
});


Часовой пояс GMT +3, время: 00:48.
Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице