Страница 3 из 6 < 12 3 45 > Последняя »
Показывать 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)

Александр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
нет, все находится на одной странице, без переходов, существует два блока левый и правый при наведении мышки левого блока - необходима подсветка правого элемента как на скриншоте (во вложении).


Часовой пояс GMT +3, время: 03:07.
Страница 3 из 6 < 12 3 45 > Последняя »
Показывать 40 сообщений этой темы на одной странице